Using VPV Globally ​
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 VPV as its root. Additionally, VPV provides VPVBaseProps
and default values, ensuring seamless integration.
src/components/AppPdfViewer.vue
vue
<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>
vue
<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>
vue
<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>
vue
<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>