Added composable to interact with

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

@@ -3,11 +3,31 @@ description: "How to use nuxt-pdf."
 ---
 
 # Quick Start
+In this quick start guide you can find an overview of how to use `nuxt-pdf`. For more advanced use cases please refer to our [specialized recipes](/nuxt-pdf/recipes).
 
-After [installing the package](/nuxt-pdf/getting-started/installation), you are able to use the exported `exportToPDF` function within your Nuxt app. 
+## Usage
+After [installing the package](/nuxt-pdf/getting-started/installation), we offer two primary ways to interact with our module.
 
-`exportToPDF` takes two parameters. The first is a HTMLElement and the second being a options object.
-We recommend making use of vue's ref system to pass a component into the function. You can see an example of this below:
+### Via composable
+
+```vue
+<template>
+  <MyComponent ref="pdfExport" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const { usePDFExport } = usePDFExport()
+
+const pdfExport = ref<HTMLElement | null>(null)
+usePDFExport(pdfExport, {
+  'fileName': 'myCoolExport.pdf',
+  // any other options
+})
+</script>
+```
+
+### Via injected variable
 
 ```vue
 <template>
@@ -26,6 +46,11 @@ $exportToPDF(pdfExport, {
 </script>
 ```
 
+## Parameters
+
+`nuxt-pdf` takes two parameters. The first is a HTMLElement and the second being an options object.
+We recommend making use of vue's ref system to pass a component into the function. You can see an example of this below:
+
 The second parameter is an options object. You can find all available options and their purpose on the [official html2pdf docs](https://ekoopmans.github.io/html2pdf.js/#options). 
 
 ::alert{type="info"}

playground/pages/index.vue

@@ -16,16 +16,14 @@
 </template>
 
 <script setup lang="ts">
-import { useNuxtApp } from '#app'
 import { ref } from 'vue'
 import { Html2PdfOptions } from '../../src/runtime/plugin.client'
-
-const { $exportToPDF } = useNuxtApp()
+import { usePDFExport } from '#imports'
 
 const page = ref<HTMLElement | null>(null)
 const pdfSection = ref<HTMLElement | null>(null)
 
 const print = async (element: HTMLElement, options: Html2PdfOptions) => {
-  await $exportToPDF(element, options)
+  await usePDFExport(element, options)
 }
 </script>

playground/pages/withAdvancedStyles.vue

@@ -15,19 +15,17 @@
 </template>
 
 <script setup lang="ts">
-import { useNuxtApp } from '#app'
 import { ref } from 'vue'
 import { Html2PdfOptions } from '../../src/runtime/plugin.client'
-
-const { $exportToPDF } = useNuxtApp()
+import { usePDFExport } from '#imports'
 
 const pdfSection = ref<HTMLElement | null>(null)
 const isExporting = ref(false)
 
 const print = async (element: HTMLElement, options: Html2PdfOptions) => {
   pdfSection.value?.classList.add('print')
   isExporting.value = true
-  await $exportToPDF(element, options)
+  await usePDFExport(element, options)
   pdfSection.value?.classList.remove('print')
   isExporting.value = false
 }

src/module.ts

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'url'
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { defineNuxtModule, addPlugin, createResolver, addImportsDir } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
@@ -13,5 +13,8 @@ export default defineNuxtModule({
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
     nuxt.options.build.transpile.push(runtimeDir)
     addPlugin(resolve(runtimeDir, 'plugin.client'))
+
+    const composables = resolve('./runtime/composables')
+    addImportsDir(composables)
   }
 })

src/runtime/composables/usePDFExport.ts

@@ -0,0 +1,5 @@
+import { useNuxtApp } from '#app'
+import { Html2PdfOptions } from '../plugin.client'
+export const usePDFExport = async (element: HTMLElement, options: Html2PdfOptions) => {
+  await useNuxtApp().$exportToPDF(element, options)
+}