Using PagedJS with Nuxt

Setting Up a Nuxt Project

First, make sure you have Node.js installed. Then create a new Nuxt project:

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install

Create a new Page

In Nuxt, pages are stored in the pages/ directory. Create a new file pages/magazine.vue:

<template>
  <div class="content">
    <h1 class="main-title">Doppio Magazine</h1>
    <section class="page" v-for="i in 5" :key="i">
      <h2 class="title">Chapter {{ i }}</h2>
      <p class="text">Content of chapter {{ i }}.</p>
    </section>
  </div>
</template>

Install PagedJS

Add Paged.js via CDN in your Nuxt config or directly in the page. The simplest approach is to add the script in your page's head:

useHead({
  script: [
    { src: 'https://unpkg.com/pagedjs/dist/paged.polyfill.js' }
  ]
})

Styling the Page

Add styles to your component:

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 4rem;
}
.page { break-after: page; }
h1 { color: #5935dd; text-align: center; }
</style>

Generate PDFs

Now that you have created a webpage that displays as a PDF using Paged.js, you can easily generate PDF files using Doppio.

What's next?

Check out the Paged.js documentation for more features!