Added styling and isExporting docs

docs/content/2.recipes/1.index.md

@@ -0,0 +1,5 @@
+# Overview
+
+The following pages contain some recipes for commonly asked patterns, questions and implementations. The recipes are mostly provided by the community and can serve as guidelines to implement something similar in your Nuxt 3 application. The recipes are not all tested through by the sidebase team. If you have any concerns, questions or improvement proposals or want to contribute a recipe yourself, we'd be very happy if you open an issue on our repository: https://github.com/sidebase/nuxt-pdf/issues/new/choose
+
+Thanks to everybody who contributed so far ❤️

docs/content/2.recipes/2.advanced-styling.md

@@ -0,0 +1,41 @@
+# Advanced Styling
+
+By default `htmlToPdf` does not support the [`@media print`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) query (See https://github.com/eKoopmans/html2pdf.js/issues/79).
+
+However, there is a workaround to apply styling on only the exported version of the component. In order to do this we must add a print class before the export and remove it once it completed.
+
+```vue
+<template>
+  <div ref="pdfSection">
+    <div class="pdfStyles">
+      This is my demo content.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const { $exportToPDF } = useNuxtApp()
+const pdfSection = ref<HTMLElement | null>(null)
+
+const print = async (element: HTMLElement, options) => {
+  pdfSection.value?.classList.add('print')
+  await $exportToPDF(element, options)
+  pdfSection.value?.classList.remove('print')
+}
+</script>
+
+<style>
+.print .pdfStyles {
+  color: blue;
+  background-color: black;
+}
+</style>
+```
+
+This will only add the styles when the component is exported as a PDF. 
+
+::alert{type="warning"}
+When using this method the user will see the styling changes reflected on the page for a few seconds during the export.
+::
+

docs/content/2.recipes/3.progressIndicator.md

@@ -0,0 +1,28 @@
+# Progress indicator
+
+Sometimes it may be helpful to include a loading indicator while the component is being exported. This can be added by introducing a new ref that updates its state according to the progress.
+
+```vue
+<template>
+  <div v-if="isExporting">
+    Exporting PDF... Please wait a minute.
+  </div>
+  <div ref="pdfSection">
+    This is my demo content.
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const { $exportToPDF } = useNuxtApp()
+
+const pdfSection = ref<HTMLElement | null>(null)
+const isExporting = ref(false)
+
+const print = async (element: HTMLElement, options) => {
+  isExporting.value = true
+  await $exportToPDF(element, options)
+  isExporting.value = false
+}
+</script>
+```

docs/content/2.recipes/_dir.yml

@@ -0,0 +1,2 @@
+title: Recipes
+icon: heroicons-outline:queue-list

playground/app.vue → playground/pages/index.vue

@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { useNuxtApp } from '#app'
 import { ref } from 'vue'
-import { Html2PdfOptions } from '../src/runtime/plugin.client'
+import { Html2PdfOptions } from '../../src/runtime/plugin.client'
 
 const { $exportToPDF } = useNuxtApp()
 

playground/pages/withAdvancedStyles.vue

@@ -0,0 +1,41 @@
+<template>
+  <div ref="page">
+    <span>
+      With advanced styling <span v-if="isExporting">Exporting... Please wait</span>
+    </span>
+    <div ref="pdfSection">
+      <div class="pdfStyles">
+        Thanks for testing out nuxt-pdf!
+      </div>
+    </div>
+    <button @click="print(pdfSection, {})">
+      print card
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNuxtApp } from '#app'
+import { ref } from 'vue'
+import { Html2PdfOptions } from '../../src/runtime/plugin.client'
+
+const { $exportToPDF } = useNuxtApp()
+
+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)
+  pdfSection.value?.classList.remove('print')
+  isExporting.value = false
+}
+</script>
+
+<style>
+.print .pdfStyles {
+  color: blue;
+  background-color: black;
+}
+</style>