Making VPV Reusable

---

For better maintainability of your application’s components, it is advisable to create a reusable component. Vue components support fallthrough attributes, which is beneficial if your component uses Vue PDF Viewer as its root. Additionally, Vue PDF Viewer provides VPVBaseProps and default values, ensuring seamless integration.

src/components/AppPdfViewer.vue

Composition TS

<script setup lang="ts">
  import { VPdfViewer, VPVBaseProps } from '@vue-pdf-viewer/viewer';

  const props = defineProps({
      ...VPVBaseProps, 
      title: {
        type: String,
        required: true
      }
    } as const
  )
</script>
<template>
  <div>
    <h2>
      {{ props.title }}
    </h2>
    <div :style="{ width: '1028px', height: '700px', margin: '0 auto'}">
      <VPdfViewer v-bind="props" />
    </div>
  </div>
</template>

Options TS

<script lang="ts">
  import { defineComponent } from 'vue'
  import { VPdfViewer, VPVBaseProps } from '@vue-pdf-viewer/viewer';
  export default defineComponent({
    components: { VPdfViewer },
    props: {
      ...VPVBaseProps,
      title: {
        type: String,
      },
    }
  })
</script>
<template>
  <div>
    <h2>
      {{ title }}
    </h2>
    <div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
      <VPdfViewer v-bind="$props" />
    </div>
  </div>
</template>

Composition JS

<script setup>
  import { VPdfViewer, VPVBaseProps } from '@vue-pdf-viewer/viewer';

  const props = defineProps({
      ...VPVBaseProps, 
      title: {
        type: String,
        required: true
      }
    }
  )
</script>
<template>
  <div>
    <h2>
      {{ props.title }}
    </h2>
    <div :style="{ width: '1028px', height: '700px', margin: '0 auto'}">
      <VPdfViewer v-bind="props" />
    </div>
  </div>
</template>

Option JS

<script>
  import { defineComponent } from 'vue'
  import { VPdfViewer, VPVBaseProps } from '@vue-pdf-viewer/viewer';
  export default defineComponent({
    components: { VPdfViewer },
    props: {
      ...VPVBaseProps,
      title: {
        type: String,
      },
    }
  })
</script>
<template>
  <div>
    <h2>
      {{ title }}
    </h2>
    <div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
      <VPdfViewer v-bind="$props" />
    </div>
  </div>
</template>