# pdf-viewer-default

> PDF viewer with toolbar, search, annotation, thumbnails, bookmarks, and print tools.

**Framework:** vue  **Component:** PdfViewer  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/pdf-viewer-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-pdfviewer
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/pdf-viewer-default/PdfViewer.vue

```vue
<template>
    <div>
        <div class="control-section">
            
            <ejs-pdfviewer 
                id="pdfviewer" 
                ref="pdfviewer" 
                :documentPath="documentPath"
                :resourceUrl="resourceUrl">
            </ejs-pdfviewer>
        </div>
 
    </div>
</template>
<style scoped>
	#pdfviewer {
		height: 640px;
	}

</style>
<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer } from "@syncfusion/ej2-vue-pdfviewer";

export default {
    components: {
        'ejs-pdfviewer': PdfViewerComponent
    },
    data: function() {
        return {
			documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
            resourceUrl: 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'}
    },
	provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]
    },
    methods: {
    }
};
</script>
```

### src/components/pdf-viewer-default/PdfViewerView.vue

```vue
<template>
  <PDFViewer />
</template>

<script setup>
import PDFViewer from '../../components/PDFViewer.vue'
</script>
```