feat: Rewrite Module to support SSR rendering (#26)

.eslintrc

@@ -1,10 +1,4 @@
 {
-  "extends": [
-    "@nuxtjs/eslint-config-typescript"
-  ],
-  "rules": {
-    "@typescript-eslint/no-unused-vars": [
-      "off"
-    ]
-  }
+  "root": true,
+  "extends": ["@nuxt/eslint-config"]
 }

.github/workflows/ci.yaml

@@ -1,33 +1,25 @@
-name: nodejs CI
+name: ci
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
   pull_request:
-    branches: [main]
+    branches:
+      - main
 
 jobs:
-  test:
+  ci:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js 16.14.2
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - run: corepack enable
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.14.2
-
-      # Install locked dependencies and prepare types
-      - run: npm ci
-      - run: npm run dev:prepare
-
-      # Check if build and package artifacts can still be generated
-      - run: npm run prepack
-
-      # Check linting and typing
-      - run: npm run lint
-      - run: npm run types
+          node-version: 20
+          cache: "pnpm"
 
-      # Check building
-      - run: npm run build:module
-      - run: npm run build:playground
+      - run: pnpm install && pnpm dev:prepare
+      - run: pnpm lint
+      - run: pnpm build
+      - run: pnpm dev:build

.gitignore

@@ -19,9 +19,9 @@ dist
 # Nuxt
 .nuxt
 .output
+.data
 .vercel_build_output
 .build-*
-.env
 .netlify
 
 # Env

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.nuxtrc

@@ -1,2 +1,2 @@
-imports.autoImport=false
-typescript.includeWorkspace=true
+# enable TypeScript bundler module resolution - https://www.typescriptlang.org/docs/handbook/modules/reference.html#bundler
+experimental.typescriptBundlerResolution=true

README.md

@@ -11,35 +11,62 @@
 
 > `nuxt-pdf` is a easy to use, pdf exporting module to convert Nuxt 3 components into downloadable PDFs.
 
-## Quick Start
-
-```sh
-npm i -D @sidebase/nuxt-pdf
-```
-
-Then visit the [Quick Start documentation](https://sidebase.io/nuxt-pdf/getting-started/quick-start) to setup the module.
-
 ## Features
 
 - Easily export your Nuxt 3 components into PDFs
+- Generate PDFs on your server
 - Guides for PDF specific styles
 - Track exporting progress
 
-### Module Playground
+## Quick Setup
+
+1. Add `@sidebase/nuxt-pdf` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D @sidebase/nuxt-pdf
+
+# Using yarn
+yarn add --dev @sidebase/nuxt-pdf
+
+# Using npm
+npm install --save-dev @sidebase/nuxt-pdf
+```
+
+2. Add `@sidebase/nuxt-pdf` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: [
+    '@sidebase/nuxt-pdf'
+  ]
+})
+```
+
+That's it! You can now use NuxtPDF in your Nuxt 3 app ✨
+
+Afterwards you can use the [Quick Start documentation](https://sidebase.io/nuxt-pdf/getting-started/quick-start) to explore the features and properly configure your NuxtPDF instance!
+
+## Development
 
-This module also has it's own playground:
-```sh
-> git clone https://github.com/sidebase/nuxt-pdf
+```bash
+# Install dependencies
+pnpm install
 
-> cd nuxt-pdf
+# Generate type stubs
+pnpm run dev:prepare
 
-> npm i
+# Develop with the playground
+pnpm run dev
 
-> npm run dev:prepare
+# Build the playground
+pnpm run dev:build
 
-> npm run dev
+# Run ESLint
+pnpm run lint
 
-# -> open http://localhost:3000
+# Release new version
+pnpm run release
 ```
 
 <!-- Badges -->

docs/.nuxtrc

@@ -0,0 +1 @@
+imports.autoImport=true

docs/app.config.ts

@@ -1,6 +1,5 @@
-// @ts-ignore
 export default defineAppConfig({
   docus: {
-    title: 'My Docs'
+    title: 'NuxtPDF docs'
   }
 })

docs/content/1.getting-started/1.index.md

@@ -1,22 +1,53 @@
 ---
-description: "Introduction to `nuxt-pdf` and its features for exporting html pages to pdf."
+description: "Introduction to `nuxt-pdf`."
 ---
 
 # Introduction
 
-`nuxt-pdf` is a Nuxt 3 wrapper around [jsPDF](https://github.com/parallax/jsPDF), a package that allows you to export PDF documents from your web apps.
+`nuxt-pdf` is an open source Nuxt 3 PDF toolkit, that allows you to easily render PDFs application or server side.
 
 ::list{type="success"}
-- Adds built in Nuxt 3 support to export components to a PDF Document
-- Works with native Nuxt 3 refs, allowing you to keep your clean Nuxt 3 code free from any external package
+- Client side exporting of Vue components to HTML
+- Server side rendering of complex PDFs
+- Simple encryption of your PDFs, by allowing you to set a password and permissions
+- Editable forms inside your PDFs
+- Pre-build components to quickly develop your PDF
+- documentation, recipes and example code to get you started
 ::
 
-After installing the module you will be able to access the function like so:
-```ts
-// file: ~/app.vue
-import { exportToPDF } from '#imports'
+::callout
+#summary
+Show me the code!
 
-await exportToPDF('my-pdf-file.pdf', HTMLElement)
-```
+#content
+Visit the [quick start](/nuxt-pdf/getting-started/quick-start) page to see code examples.
+::
+
+## Which method is right for me?
+
+Generating PDFs on the client or through the server fundamentally change how the PDF is compiled and created. We try and ensure that our feature set matches both methods equally, however there are a few method-specific features. These are listed below.
+
+|                                                     | Application Side | Server Side |
+|-----------------------------------------------------|------------------|-------------|
+| **Features**                                        |                  |             |
+| Convert Vue components to PDFs                      | ✅                | ❌           |
+| Add Encryption to your PDFs                         | ✅                | ✅           |
+| Define Layouts for your PDFs                        | ❌                | ✅           |
+| Use your Tailwind Styles                            | ✅                | ❌           |
+| Use pre-build components to create your PDF         | ❌                | ✅           |
+| Define your default PDF options in `nuxt.config.ts` | ❌                | ✅           |
+
+One factor that this table does not take into account is the reliablity and consistency, that server side generated PDFs will add to your application. Generating a PDF from HTML code, may result in different appearences, based on the browser, screen size and other settings on an individuals PC, limiting the control you have over the finished product. Rendering your PDFs on the server side, will allow you to control the output to a mich higher degree.
+
+### Use cases
+
+#### Application side
+
+- You need to quickly develop your PDF integration
+- You already have Vue components developed, that can be reused to generate the PDFs
+- You are not concerned about minor layout shifts and differences between browsers
+
+#### Server side
 
-See more in the [Quick Start section](/nuxt-pdf/getting-started/quick-start).
+- You require a higher degree of control over the output
+- You are developing complex PDFs that may require large amounts of data, you do not want to directly expose to a users client

docs/content/1.getting-started/3.quick-start.md

@@ -12,9 +12,20 @@ export default defineNuxtConfig({
 })
 ```
 
-That's it! You can now begin exporting Nuxt 3 components to PDF. For example:
+## Examples
+
+That's it! You can now begin creating PDFs in your Nuxt 3 application!
+
+### Application side
+
+You can export Vue components to HTML through our composables. You can learn more about using `nuxt-pdf` in the application side [here](/nuxt-pdf/application-side).
 
 ```vue
+// file: ~/components/PDF.vue
+<script setup lang="ts">
+const pdfSection = ref<HTMLElement | null>(null)
+</script>
+
 <template>
   <div>
     <div ref="pdfSection">
@@ -25,16 +36,21 @@ That's it! You can now begin exporting Nuxt 3 components to PDF. For example:
     </button>
   </div>
 </template>
+```
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { exportToPDF } from '#imports'
+### Server side
 
-const pdfSection = ref<HTMLElement | null>(null)
-</script>
-```
+Or use our server side code based approch to define your design! You can learn more about using `nuxt-pdf` on the server side [here](/nuxt-pdf/server-side).
 
-We offer two separate options parameters, that allow you to customize your pdf export. 
+```ts
+// file: ~/server/api/pdf/my-pdf.vue
+import { createPDF, streamReturnPDF } from '#pdf'
+
+export default eventHandler(async (event) => {
+  const pdf = createPDF()
+  pdf.text('Welcome to NuxtPDF!')
+  pdf.end()
 
-- The `documentOptions`, allow you to customize the general layout of your document. You can find the options [here](http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html).
-- The `htmlOptions`, allow you to customize the conversion of your HTML to a canvas. You can find the options [here](http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html).
+  return streamReturnPDF(event, pdf)
+})
+```