Nuxt PDFMake

introduction

Setup

Add pdfMake to your Nuxt project easily with this module.

Installation

  1. Add nuxt-pdfmake dependency to your project
NPM
npm install -D nuxt-pdfmake
  1. Add nuxt-pdfmake to the modules section of nuxt.config.js
nuxt.config.js
export default defineNuxtConfig({
  modules: ["nuxt-pdfmake"],
});
  1. Extract the $pdfMake instance from the useNuxtApp composable & use it in your functions!
Well Done!
You can now print/download PDFs directly in the browser.

Usage

There are two ways in which you can use the pdfMake instance in your Nuxt project:

  1. Plugin usage - You can destructure the $pdfMake instance from the useNuxtApp composable and use it in your functions.
plugins/pdfMake.ts
const exportData = () => {
  const { $pdfMake } = useNuxtApp();
  const docDefinition = {
    content: [
      "First paragraph",
      "Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines",
    ],
  };
  $pdfMake.createPdf(docDefinition).open();
};
  1. Composable usage - You may use the auto-imported usePDFMake composable to access the $pdfMake instance.
pages/index.vue
const exportData = () => {
  usePDFMake()
    .createPdf({
      content: [
        "First paragraph",
        "Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines",
      ],
    })
    .open();
};

Devtools

Quickly browse the pdfmake documentation in the Nuxt devtools.