# pdf-viewer-organize-pages

> PDF viewer organizes pages by reordering, rotating, and deleting them in a side panel.

**Framework:** vue  **Component:** PdfViewer  **Variant:** organize-pages

## 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-organize-pages.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-organize-pages/PdfViewer.vue

```vue
<template>
    <div>
        <div class="control-section">
            
            <ejs-pdfviewer 
                id="pdfviewer" 
                ref="pdfviewer" 
                :documentPath="documentPath"
                :documentLoad="documentLoad"
                :resourceUrl="resourceUrl"
                :pageOrganizerSettings="pageOrganizerSettings">
            </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";
var isInitialLoading = false;
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',
            pageOrganizerSettings: { showImageZoomingSlider: true },
            isInitialLoading: true
        }
    },
    mounted() {
        isInitialLoading = true;
    },

	provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]
    },
    methods: {
        documentLoad: function (args) {
            if(isInitialLoading)
            {
                this.$refs.pdfviewer.ej2Instances.isPageOrganizerOpen = true;
                isInitialLoading = false;
            }
            else{
                this.$refs.pdfviewer.ej2Instances.isPageOrganizerOpen = false;
            }
        },

    }
};
</script>
```

### src/components/pdf-viewer-organize-pages/PdfViewerView.vue

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

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