npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-pdf

v2.0.1

Published

NuxtJS module to generate PDF files and manage PDF in your Nuxt application

Downloads

54

Readme

Nuxt PDF [WIP]

npm npm (scoped with tag) License

Generate PDF files directly from your content on your website, can be used for offline downloadable documentation pages.

Features

  • Create PDF from Vue template
  • Automatic PDF Generation
  • Customizable Metadata
  • Supports (A1, A2, A3, A4, A5, Letter, Legal, Tabloid)
  • Support dynamic routes (Nuxt Generate)
  • Support dynamic titles (from tag)
  • I18n support for specific languages
  • Generates as you edit (Automatic PDF regeneration)
  • For NUXT 2.x and higher

Table of Contents

Installation

npm install nuxt-pdf --save-dev

or

yarn add -D nuxt-pdf

Usage

  • Add the class .page to your page to display when printing, for formatting, add classes: .a1, .a2, .a3, .a4, .a5, .letter, .legal, or .tabloid

  • Add nuxt-pdf to the buildModules section of your nuxt.config.js file:

buildModules: ['nuxt-pdf']
  • Add a custom configuration with the pdf property.

You can see the available options in the example configuration

// nuxt.config.js

{
  buildModules: [
    'nuxt-pdf'
  ],
  pdf: {
    // custom configuration
  }
}

Configuration

// nuxt.config.js

{
  pdf: {
    /*
    * Output folder for generated pdf.
    */
    dir: "static",

    /*
    * Function options for page.pdf([options])
    * Read more: https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-pagepdfoptions
    */
    pdf: {
      // Change the format of the pdfs.
      format: "A4", // This is optional 
      printBackground: true // Include background in pdf.
    }

    /*
    * Function options for page.setViewport([options])
    * Read more: https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-pagesetviewportviewport
    */
    viewport: {
      // override the default viewport
      width: 1280,
      height: 800
    },

    /*
    * Enable i18n support.
    */
    i18n: false,

    /*
     * Add options to the puppeteer launch.
     * Read more: https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-puppeteerlaunchoptions
     */
    puppeteer: {
      // Puppeteer options here... E.g. env: {}
    },

    /*
    * PDF Meta configuration. (inspired by vue-meta)
    */
    meta: {
      title: "My Module",
      titleTemplate: "Documentation ─ %s",

      author: "Christian Hansen",
      subject: "Example",

      producer: "Example Inc.",

      // Control the date the file is created.
      creationDate: new Date(),

      keywords: ["pdf", "nuxt"]
    },

    /*
    * PDF generation routes. (expanding nuxt.generate)
    */
    routes: [
      {
        // Output file inside output folder.
        file: "downloads/documentation.pdf",

        // Route to content that should be converted into pdf.
        route: "docs",

        // Default option is to remove the route after generation so it is not accessible
        keep: true, // defaults to false

        // Specifify language for pdf. (Only when i18n is enabled!)
        locale: 'da',

        // Override global meta with individual meta for each pdf.
        meta: {
          title: "Home"
        },
        pdf: {
          // route specific pdf options
          landscape: true // Include background in pdf.
        },
        viewport: {
          // route specific viewport
          width: 1280,
          height: 800
        },
      },
      {
        // Output: static/downloads/documentation-vue.pdf
        file: "downloads/documentation-vue.pdf",

        // Will generate route https://localhost:3000/docs/vue
        route: "docs/vue",

        // Title will be Documentation - Vue
        meta: {
          title: "Vue"
        }
      }
    ]
  }
}
  • PDF generation

PDFs will be generated when running nuxt build, nuxt generate or in development nuxt dev

Development

$ git clone https://github.com/ch99q/nuxt-pdf.git

$ cd nuxt-pdf

$ yarn

License

MIT License