search

TaTo30 / vue-pdf

PDF component for Vue 3
https://tato30.github.io/vue-pdf/
MIT License
408 stars 62 forks source link

nuxt support #24

Closed IgorHalfeld closed 10 months ago

IgorHalfeld commented 1 year ago

any plans to have a nuxt support?

TaTo30 commented 1 year ago

I don't know much about nuxt except it renders on server side, this library only works on client side.

Maybe there are some directives in nuxt that allows you use client side components.

IgorHalfeld commented 1 year ago

yep! @TaTo30, but usePDF composable uses client-side apis.

it should not broke entire app when first render

Suniver commented 11 months ago

Works fine with nuxt3 for me. You just need to wrap you component with <ClientOnly></ClientOnly> tags like in this example:

ParentComponent.vue

<template>
  <ClientOnly>
    <ChildComponent />
  </ClientOnly>
</template>

ChildComponent.vue

 <template>
  <VuePDF :pdf="pdf" />
</template>

<script setup>
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import "@tato30/vue-pdf/style.css";

const { pdf } = usePDF("file.pdf");
</script>

Since Nuxt3 knows you only want to use this component client side he will not call usePDF on server side. Just don't do the mistake to only wrap <VuePDF :pdf="pdf" /> with <ClientOnly></ClientOnly> in your component and call usePDF in your script, nuxt will indeed try to to call udePDF server side and you will get a server 500 error.

Hope this little explanation will help future users of nuxt and VuePDF ;)

TaTo30 commented 10 months ago

Thanks @Suniver!, very useful example.