began working on improving client side PDF export

playground/components/TestStage.vue

@@ -0,0 +1,7 @@
+<template>
+  <PDFPage>
+    <h1>
+      Test
+    </h1>
+  </PDFPage>
+</template>

playground/pages/test.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { exportToPDF } from '#imports'
+
+const pdfSection = ref<HTMLElement | null>(null)
+</script>
+
+<template>
+  <div>
+    <div>
+      Export The page:
+      <button
+        style="border-radius: 0; font-size: 20px; cursor: pointer"
+        @click="exportToPDF('pdf_export.pdf', pdfSection as HTMLElement, undefined, {html2canvas: {scale: 0.7, useCORS: true}})"
+      >
+        Generate normal PDF
+      </button>
+    </div>
+    <hr>
+    <div ref="pdfSection">
+      <TestStage />
+    </div>
+  </div>
+</template>

src/module.ts

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit'
+import { defineNuxtModule, createResolver, addImportsDir, addComponent } from '@nuxt/kit'
 import { defu } from 'defu'
 import type { ModuleOptions } from './runtime/types'
 
@@ -48,5 +48,12 @@ export default defineNuxtModule<ModuleOptions>({
     // Step 2: Inject Client side composables to create pdfs from vue components
     const composables = resolver.resolve('./runtime/composables')
     addImportsDir(composables)
+
+    // Step 3: Inject PDF Components
+    addComponent({
+      name: 'PDFPage',
+      export: 'PDFPage',
+      filePath: resolver.resolve('runtime/components/PDFPage.vue')
+    })
   }
 })

src/runtime/components/PDFPage.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Test</h1>
+    <slot />
+  </div>
+</template>