From 48fc911c0e6d1171da064f9700570bd9426b8ffd Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Thu, 20 Aug 2026 17:29:51 +0530
Subject: [PATCH 1/2] 1038023: Updated Toolbar in Vue PDF Viewer

---
 Document-Processing-toc.html                  |   3 +-
 .../PDF/PDF-Viewer/vue/mobile-toolbar.md      | 308 ++++++++++++++++
 .../annotation-toolbar.md                     | 344 +++++-------------
 .../toolbar-customization/custom-toolbar.md   |  68 +++-
 .../form-designer-toolbar.md                  | 284 ++++++---------
 .../toolbar-customization/mobile-toolbar.md   | 288 +++++----------
 .../vue/toolbar-customization/overview.md     |  72 ++++
 .../toolbar-customization/primary-toolbar.md  | 269 ++++++++++++--
 8 files changed, 964 insertions(+), 672 deletions(-)
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/overview.md

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 1c3e3aa957..bc02bfffef 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -1684,7 +1684,8 @@
 								</ul>
 							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/accessibility">Accessibility</a></li>
-							<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar">Toolbar Customization</a> 
+							<li><a href="/document-processing/pdf/pdf-viewer/vue/mobile-toolbar">Mobile Toolbar Interface</a></li>
+							<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar-customization/overview">Toolbar </a> 
 							    <ul>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar-customization/primary-toolbar">Primary Toolbar</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar-customization/annotation-toolbar">Annotation Toolbar</a></li>
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md
new file mode 100644
index 0000000000..bbb0b1d354
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md
@@ -0,0 +1,308 @@
+---
+layout: post
+title: Mobile Toolbar in Vue PDF Viewer | Syncfusion
+description: Customize the mobile toolbar in the Vue PDF Viewer to ensure smooth touch interactions and a tailored experience on small screens.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Customize the Mobile Toolbar in Vue PDF Viewer
+
+The Mobile PDF Viewer provides features for viewing, searching, annotating, and managing PDF documents on mobile devices. It exposes core tools such as search, download, bookmarking, annotation, and page organization. The desktop toolbar can also be enabled in mobile mode to expose additional actions when required.
+
+## Mobile Mode Toolbar Configuration
+
+In mobile mode, the toolbar is optimized for small screens and presents the most common actions for interacting with a PDF document. The following key features are available in mobile mode:
+
+![Mobile toolbar with primary PDF interaction options](./images/mobileToolbar.png)
+
+### Main Toolbar Options
+
+- OpenOption: Tap to load a PDF document.
+- SearchOption: Access the search bar to find text within the document.
+
+![Search bar displayed for finding text within a PDF](./images/searchOption.png)
+
+- UndoRedoTool: Quickly undo or redo any annotations made.
+- OrganizePagesTool: Enable or disable page organization features to modify document pages.
+
+![Page organization interface for modifying PDF pages](./images/organizePages.png)
+
+- AnnotationEditTool: Activate or deactivate annotation editing to add or modify annotations.
+
+![Annotation editing toolbar allowing users to add, edit, or delete annotations on a PDF](./images/editAnnotation.png)
+
+N> In mobile mode, the annotation toolbar is displayed at the bottom of the viewer.
+
+### More Options Menu
+When you open the more options menu, you will see additional actions such as:
+
+- DownloadOption: Download the currently opened PDF document.
+- BookmarkOption: View bookmarks within the document.
+
+![More options menu showing additional actions like download and bookmark](./images/more-options.png)
+
+## Enable Desktop Mode in Mobile
+
+The desktop toolbar can be enabled on mobile devices by setting the `enableDesktopMode` option. Enabling this option exposes desktop-style toolbar actions in the mobile PDF Viewer.
+
+### Steps to Enable Desktop Mode
+
+**Step 1:** Set `enableDesktopMode` to true in the component configuration.
+**Step 2:** The viewer will use the desktop toolbar layout, granting access to additional actions and controls.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (Standalone)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :enableDesktopMode="true">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script setup>
+import {
+  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { provide } from 'vue';
+
+const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
+
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
+  TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Standalone)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :enableDesktopMode="true">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
+      TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
+  }
+}
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :enableDesktopMode="true">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script setup>
+import {
+  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { provide } from 'vue';
+
+const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
+  TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :enableDesktopMode="true">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
+      TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
+  }
+}
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+## Enable Scrolling in Desktop Mode with Touch Gestures
+
+To ensure smooth touch scrolling of documents on mobile devices when the desktop toolbar is enabled, set the `enableTextSelection` option to **false**. This disables text-selection interactions that can interfere with touch-based scrolling.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (Standalone)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :enableDesktopMode="true" :enableTextSelection="false">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script setup>
+import {
+  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { provide } from 'vue';
+
+const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
+
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
+  TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Standalone)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :enableDesktopMode="true" :enableTextSelection="false">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
+      TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
+  }
+}
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :enableDesktopMode="true" :enableTextSelection="false">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script setup>
+import {
+  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { provide } from 'vue';
+
+const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
+  TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :enableDesktopMode="true" :enableTextSelection="false">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
+      TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
+  }
+}
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+## Print Option Not Available in Mobile Mode
+
+The Print option is not available in mobile mode by default. Enabling the desktop toolbar on mobile via `enableDesktopMode` makes the Print option available.
+
+### How to Use Print on Mobile
+
+- Set `enableDesktopMode` to true to load the desktop toolbar on mobile.
+- After enabling desktop mode, the Print option appears in the toolbar and can be used to print the document from the mobile device.
+
+N> Print functionality remains unavailable in the default mobile toolbar unless desktop mode is enabled.
+
+## See also
+
+* [Primary toolbar customization](./toolbar-customization/primary-toolbar)
+* [Custom toolbar](./toolbar-customization/custom-toolbar)
+* [Annotation toolbar customization](./toolbar-customization/annotation-toolbar)
+* [Form designer toolbar customization](./toolbar-customization/form-designer-toolbar)
+* [Toolbar customization](./toolbar-customization/overview)
+* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/annotation-toolbar.md
index 24e353939b..8faf124ab8 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/annotation-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/annotation-toolbar.md
@@ -1,37 +1,39 @@
 ---
 layout: post
-title: Annotation Toolbar in Vue PDF Viewer component | Syncfusion
-description: Learn how to customize the annotation toolbar in the Syncfusion Vue PDF Viewer. Show or hide it and choose which tools to display and in what order.
+title: Customize the Annotation Toolbar in Vue PDF Viewer | Syncfusion
+description: Show or hide and customize the annotation toolbar in the EJ2 Vue PDF Viewer with runnable examples.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Annotation Toolbar Customization in Vue
+# Customize the Annotation Toolbar in Vue PDF Viewer
 
-The annotation toolbar can be customized by showing or hiding default items and by controlling the order in which they appear.
+## Overview
 
-For details about the built-in toolbar and common toolbar options, see the Toolbar article: ../toolbar.md
+This guide shows how to show or hide the annotation toolbar and how to choose which tools appear and their order.
 
-## Show or hide the annotation toolbar
+**Outcome:** A working Vue example that toggles the annotation toolbar and uses [`annotationToolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarsettings#annotationtoolbaritems) to customize the toolbar.
 
-Show or hide the annotation toolbar programmatically during initialization or at runtime.
+## Prerequisites
 
-Use the enableAnnotationToolbar property or the showAnnotationToolbar method to toggle visibility.
+- EJ2 Vue PDF Viewer installed and added in your project. See [getting started guide](../getting-started)
+- A valid [`resourceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#serviceurl) for viewer assets when running locally
 
-- enableAnnotationToolbar API: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#enableannotationtoolbar
-- showAnnotationToolbar method: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar/#showannotationtoolbar
+## Steps
 
-The following example shows how to show or hide the annotation toolbar using the `showAnnotationToolbar` method.
+### 1. Show or hide the annotation toolbar
+
+Use the [`showAnnotationToolbar`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar#showannotationtoolbar) method on the viewer toolbar to control visibility.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 
 <template>
   <div id="app">
-    <button v-on:click="toggleAnnoToolbar">Toggle Annotation Toolbar</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
+    <button @click="hideAnnotationToolbar">Hide Annotation Toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="viewer" :documentPath="documentPath" :resourceUrl="resourceUrl" height="600px" width="100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -39,24 +41,22 @@ The following example shows how to show or hide the annotation toolbar using the
 <script setup>
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
 import { provide, ref } from 'vue';
 
-const pdfviewer = ref(null);
+const viewer = ref(null);
+const show = ref(true);
 const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
 const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
 
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
 
-const toggleAnnoToolbar = () => {
-  const toolbar = pdfviewer.value?.ej2Instances?.toolbar;
-  if (toolbar) {
-    // Pass false to hide, true to show
-    toolbar.showAnnotationToolbar(false);
-  }
-}
+const hideAnnotationToolbar = () => {
+  viewer.value.ej2Instances.toolbar.showAnnotationToolbar(show.value);
+  show.value = !show.value;
+};
 </script>
 
 {% endhighlight %}
@@ -64,8 +64,8 @@ const toggleAnnoToolbar = () => {
 
 <template>
   <div id="app">
-    <button v-on:click="toggleAnnoToolbar">Toggle Annotation Toolbar</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
+    <button @click="hideAnnotationToolbar">Hide Annotation Toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="viewer" :documentPath="documentPath" :resourceUrl="resourceUrl" height="600px" width="100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -73,99 +73,29 @@ const toggleAnnoToolbar = () => {
 <script>
 import {
   PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
 
 export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
-  data() {
-    return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
-    };
+  name: "App",
+  components: {
+    "ejs-pdfviewer": PdfViewerComponent
   },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-      ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    toggleAnnoToolbar() {
-      this.$refs.pdfviewer.ej2Instances.toolbar.showAnnotationToolbar(false);
-    }
-  }
-}
-</script>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the server-backed PDF Viewer, add the following serviceUrl in your component and bind it to the PDF Viewer using :serviceUrl="serviceUrl".
-serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="toggleAnnoToolbar">Toggle Annotation Toolbar</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
-
-const toggleAnnoToolbar = () => {
-  pdfviewer.value.ej2Instances.toolbar.showAnnotationToolbar(false);
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="toggleAnnoToolbar">Toggle Annotation Toolbar</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
   data() {
     return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-      serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
+      show: true,
+      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
+      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
     };
   },
   provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-      ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+      BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
   },
   methods: {
-    toggleAnnoToolbar() {
-      this.$refs.pdfviewer.ej2Instances.toolbar.showAnnotationToolbar(false);
+    hideAnnotationToolbar() {
+      this.$refs.viewer.ej2Instances.toolbar.showAnnotationToolbar(this.show);
+      this.show = !this.show;
     }
   }
 }
@@ -174,26 +104,21 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-## How to customize the annotation toolbar
+### 2. Show or hide annotation toolbar items
 
-Choose which tools appear and control their order in the annotation toolbar.
+Use [`annotationToolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarsettings#annotationtoolbaritems) with a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationtoolbaritem) values. The toolbar shows only items in this list.
 
-Use ToolbarSettings with the annotationToolbarItems property to choose which tools are displayed in the annotation toolbar. The property accepts a list of AnnotationToolbarItem values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list.
+**Complete example**
 
-- ToolbarSettings: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/
-- annotationToolbarItems: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/#annotationtoolbaritems
-- AnnotationToolbarItem: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationToolbarItem/
-
-The annotation toolbar is presented when entering annotation mode in the PDF Viewer and adapts responsively based on the available width. Include the Close tool to allow users to exit the annotation toolbar when needed.
-
-The following example demonstrates how to customize the annotation toolbar by specifying a selected set of tools using AnnotationToolbarItem.
+The following is a complete, runnable example. It wires a toggle button and a viewer with a custom annotation toolbar list.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 
 <template>
   <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings">
+    <button @click="hideAnnotationToolbar">Hide Annotation Toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="viewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings" height="600px" width="100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -201,39 +126,27 @@ The following example demonstrates how to customize the annotation toolbar by sp
 <script setup>
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
+import { provide, ref } from 'vue';
 
-const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+const viewer = ref(null);
+const show = ref(true);
+const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
 const toolbarSettings = {
   annotationToolbarItems: [
-    'HighlightTool',
-    'UnderlineTool',
-    'StrikethroughTool',
-    'ColorEditTool',
-    'OpacityEditTool',
-    'AnnotationDeleteTool',
-    'StampAnnotationTool',
-    'HandWrittenSignatureTool',
-    'InkAnnotationTool',
-    'ShapeTool',
-    'CalibrateTool',
-    'StrokeColorEditTool',
-    'ThicknessEditTool',
-    'FreeTextAnnotationTool',
-    'FontFamilyAnnotationTool',
-    'FontSizeAnnotationTool',
-    'FontStylesAnnotationTool',
-    'FontAlignAnnotationTool',
-    'FontColorAnnotationTool',
-    'CommentPanelTool'
+    'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool', 'AnnotationDeleteTool', 'CommentPanelTool'
   ]
 };
 
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
+
+const hideAnnotationToolbar = () => {
+  viewer.value.ej2Instances.toolbar.showAnnotationToolbar(show.value);
+  show.value = !show.value;
+};
 </script>
 
 {% endhighlight %}
@@ -241,7 +154,8 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnota
 
 <template>
   <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings">
+    <button @click="hideAnnotationToolbar">Hide Annotation Toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="viewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings" height="600px" width="100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -249,45 +163,35 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnota
 <script>
 import {
   PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
 
 export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  name: "App",
+  components: {
+    "ejs-pdfviewer": PdfViewerComponent
+  },
   data() {
     return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
+      show: true,
+      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
+      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
       toolbarSettings: {
         annotationToolbarItems: [
-          'HighlightTool',
-          'UnderlineTool',
-          'StrikethroughTool',
-          'ColorEditTool',
-          'OpacityEditTool',
-          'AnnotationDeleteTool',
-          'StampAnnotationTool',
-          'HandWrittenSignatureTool',
-          'InkAnnotationTool',
-          'ShapeTool',
-          'CalibrateTool',
-          'StrokeColorEditTool',
-          'ThicknessEditTool',
-          'FreeTextAnnotationTool',
-          'FontFamilyAnnotationTool',
-          'FontSizeAnnotationTool',
-          'FontStylesAnnotationTool',
-          'FontAlignAnnotationTool',
-          'FontColorAnnotationTool',
-          'CommentPanelTool'
+          'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool', 'AnnotationDeleteTool', 'CommentPanelTool'
         ]
       }
     };
   },
   provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-      ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+      BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
+  },
+  methods: {
+    hideAnnotationToolbar() {
+      this.$refs.viewer.ej2Instances.toolbar.showAnnotationToolbar(this.show);
+      this.show = !this.show;
+    }
   }
 }
 </script>
@@ -295,92 +199,22 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-N> To set up the server-backed PDF Viewer, add the following serviceUrl in the component and bind it using :serviceUrl="serviceUrl".
-serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :toolbarSettings="toolbarSettings">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
-
-const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-const serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
-const toolbarSettings = {
-  annotationToolbarItems: [
-    'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool',
-    'AnnotationDeleteTool', 'StampAnnotationTool', 'HandWrittenSignatureTool', 'InkAnnotationTool',
-    'ShapeTool', 'CalibrateTool', 'StrokeColorEditTool', 'ThicknessEditTool', 'FreeTextAnnotationTool',
-    'FontFamilyAnnotationTool', 'FontSizeAnnotationTool', 'FontStylesAnnotationTool', 'FontAlignAnnotationTool',
-    'FontColorAnnotationTool', 'CommentPanelTool'
-  ]
-};
+## Troubleshooting
 
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
-</script>
+- Annotation toolbar tools do not appear.
+    - **Cause**: The items are not valid [`AnnotationToolbarItem`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationtoolbaritem) strings or the viewer is not provided with [`Annotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation) / [`Toolbar`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar) services.
+    - **Solution**: Confirm services in `provide` includes [`Toolbar`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar) and [`Annotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation) and use valid item names.
 
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
+## Related topics
 
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :toolbarSettings="toolbarSettings">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
-  data() {
-    return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-      serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer',
-      toolbarSettings: {
-        annotationToolbarItems: [
-          'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool',
-          'AnnotationDeleteTool', 'StampAnnotationTool', 'HandWrittenSignatureTool', 'InkAnnotationTool',
-          'ShapeTool', 'CalibrateTool', 'StrokeColorEditTool', 'ThicknessEditTool', 'FreeTextAnnotationTool',
-          'FontFamilyAnnotationTool', 'FontSizeAnnotationTool', 'FontStylesAnnotationTool', 'FontAlignAnnotationTool',
-          'FontColorAnnotationTool', 'CommentPanelTool'
-        ]
-      }
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-      ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
-  }
-}
-</script>
-
-{% endhighlight %}
-{% endtabs %}
+- [Customize form designer toolbar](./form-designer-toolbar)
+- [Customize primary toolbar](./primary-toolbar)
 
 ## See also
 
-* [Primary toolbar customization](./toolbar-customization/primary-toolbar-customization)
-* [Custom toolbar](./toolbar-customization/custom-toolbar)
-* [Annotation toolbar customization](./toolbar-customization/annotation-toolbar-customization)
-* [Form designer toolbar customization](./toolbar-customization/form-designer-toolbar-customization)
-* [Mobile toolbar](./toolbar-customization/mobile-toolbar)
-* [Toolbar customization](./how-to/toolbar-customization)
+* [Primary toolbar customization](./primary-toolbar)
+* [Custom toolbar](./custom-toolbar)
+* [Annotation toolbar customization](./annotation-toolbar)
+* [Form designer toolbar customization](./form-designer-toolbar)
+* [Mobile toolbar](./mobile-toolbar)
 * [Feature Modules](./feature-module)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/custom-toolbar.md
index 20330d8f80..eb1017286e 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/custom-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/custom-toolbar.md
@@ -1,24 +1,34 @@
 ---
 layout: post
-title: Custom Toolbar in Vue PDF Viewer Component | Syncfusion
-description: Learn all about creating a custom toolbar in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more.
+title: Custom Toolbar in Vue PDF Viewer | Syncfusion
+description: Create a custom toolbar in the Vue PDF Viewer, including adding commands and modifying the built-in tools to match your workflow.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Custom Toolbar in Vue PDF Viewer
+# Create a custom toolbar in Vue PDF Viewer
 
-The PDF Viewer provides APIs for the user interaction options available in its built-in toolbar. Using these APIs, a custom application-level toolbar can be created by hiding the default toolbar and adding Syncfusion EJ2 toolbar components.
+## Overview
 
-Follow these steps to create a custom toolbar for the PDF Viewer:
+This guide shows you how to create a custom toolbar for the EJ2 Vue PDF Viewer. The PDF Viewer provides APIs for all user interaction options available in its built-in toolbar. By hiding the default toolbar and adding Syncfusion EJ2 toolbar components, you can build a custom application-level toolbar that fits your design.
 
-**Step 1: Create a simple PDF Viewer sample.**
+**Outcome**: a working Vue example with a custom toolbar for PDF navigation, magnification, print, and download.
+
+## Prerequisites
+
+- EJ2 Vue PDF Viewer installed and added in project. See [getting started guide](../getting-started)
+- `@syncfusion/ej2-vue-navigations` package installed for toolbar components
+- If using standalone WASM mode, provide [`resourceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourceurl) or a [`serviceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#serviceurl) for server mode.
+
+## Steps
+
+### Step 1: Create a simple PDF Viewer sample
 
 Create a simple PDF Viewer sample by following the [getting started](https://ej2.syncfusion.com/vue/documentation/pdfviewer/getting-started) guide.
 
-**Step 2: Add template markup for the custom toolbars.**
+### Step 2: Add HTML elements for the custom toolbar
 
 Add toolbar components and the PDF Viewer component to your Vue template. One toolbar handles primary actions, and another handles magnification actions.
 
@@ -106,7 +116,7 @@ Add toolbar components and the PDF Viewer component to your Vue template. One to
 {% endhighlight %}
 {% endtabs %}
 
-**Step 3: Import and register modules.**
+### Step 3: Import and inject the necessary modules
 
 ```ts
 import Vue from "vue";
@@ -120,9 +130,9 @@ Vue.use(PdfViewerPlugin);
 Vue.use(ToolbarPlugin);
 ```
 
-**Step 4: Hide the built-in toolbar.**
+### Step 4: Hide the default toolbar of the PDF Viewer
 
-Use enableToolbar to hide the built-in toolbar and rely on the custom toolbar.
+Set the [`enableToolbar`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enabletoolbar) property to `false` to hide the built-in toolbar:
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -156,7 +166,8 @@ export default Vue.extend({
 {% endhighlight %}
 {% endtabs %}
 
-**Step 5: Styles for the custom toolbars.**
+### Step 5: Add EJ2 Toolbar for primary actions
+Create a custom `<ejs-toolbar>` component with items for Open, Previous Page, Next Page, Go to Page, Print, and Download. Use the `<e-items>` and `<e-item>` directives to define toolbar items:
 
 ```css
 <style>
@@ -209,9 +220,9 @@ export default Vue.extend({
 
 > The icons are embedded in the font file used in the above code snippet.
 
-**Step 6: Add the script logic for user interactions.**
+### Step 6: Add EJ2 Toolbar for magnification actions
 
-Hook up toolbar button clicks and wire up PDF Viewer APIs.
+Add toolbar items for zoom controls: Fit to Page, Zoom In, and Zoom Out:
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -424,10 +435,29 @@ export default Vue.extend({
 Sample:
 [https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/custom-toolbar.html](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/custom-toolbar.html)
 
-## See also
+## Expected result
+
+- The custom toolbar appears above the PDF Viewer showing all defined items.
+- Clicking toolbar buttons performs the expected actions: opening files, navigating pages, zooming, printing, and downloading.
+- The page number input validates numeric input and navigates to the entered page on Enter key.
+- Previous and Next buttons disable at the first and last pages respectively.
+
+## Troubleshooting
+
+- Toolbar does not appear.
+    - **Cause**: Toolbar or required services not provided.
+    - **Solution**: ensure Toolbar service and required PDF Viewer services (Magnification, Navigation, etc.) are provided to the component.
+
+- Toolbar item clicks do not work.
+    - **Cause**: `clickHandler` not bound or PDF Viewer reference is undefined.
+    - **Solution**: ensure the toolbar `@clicked` event is bound to `clickHandler` method, and the PDF Viewer is properly referenced as `pdfviewer` (Composition API) or `this.$refs.pdfviewer` (Options API).
+
+- Icons do not display correctly.
+    - **Cause**: Icon font not loaded or incorrect class name.
+    - **Solution**: verify the `prefixIcon` values match Syncfusion icon classes (e.g., `e-icons`, `e-pv-*`) and the icon fonts are included in your project.
+
+## Related topics
 
-* [Primary toolbar customization](./primary-toolbar)
-* [Form designer toolbar customization](./form-designer-toolbar)
-* [Mobile toolbar](./mobile-toolbar)
-* [Toolbar customization](../toolbar)
-* [Feature Modules](../feature-module)
+- [Primary toolbar customization](./primary-toolbar)
+- [Annotation toolbar customization](./annotation-toolbar)
+- [Form designer toolbar customization](./form-designer-toolbar)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/form-designer-toolbar.md
index b18a0952c1..45f0c913e7 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/form-designer-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/form-designer-toolbar.md
@@ -1,34 +1,38 @@
 ---
 layout: post
-title: Form Designer Toolbar in Vue PDF Viewer component | Syncfusion
-description: Learn how to customize the form designer toolbar in the Syncfusion Vue PDF Viewer. Show/hide the toolbar and choose which tools to display and in what order.
+title: Customize the Form Designer Toolbar in Vue PDF Viewer | Syncfusion
+description: Learn how to show or hide and customize the Form Designer toolbar in the Syncfusion EJ2 Vue PDF Viewer.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Form Designer Toolbar Customization in Vue
+# Customize the Form Designer Toolbar in Vue PDF Viewer
 
-Customize the form designer toolbar by showing or hiding default items and controlling the order in which items appear.
+## Overview
 
-For details about the built-in toolbar and common toolbar options, see the Toolbar article: ../toolbar.md
+This guide shows how to show or hide the form designer toolbar, and how to configure which tools appear and their order.
 
-## Show or hide the form designer toolbar
+**Outcome**: a working Vue example customizing the form designer toolbar.
 
-The form designer toolbar can be shown or hidden programmatically during initialization or at runtime.
+## Prerequisites
 
-Use the [enableFormDesigner](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pdfviewermodel#enableformdesigner) property to set initial visibility or call the [showFormDesignerToolbar](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar#showformdesignertoolbar) method at runtime to toggle visibility.
+- EJ2 Vue PDF Viewer installed and added in project. See [getting started guide](../getting-started)
+- If using standalone WASM mode, provide [`resourceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourceurl) or a [`serviceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#serviceurl) for server mode.
 
-The following code snippet explains how to show or hide the toolbar using the `showFormDesignerToolbar` method.
+## Steps
+
+### 1. Show or hide Form Designer toolbar at initialization
+
+Set the [`isFormDesignerToolbarVisible`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#isformdesignertoolbarvisible) property to `true` or `false` to control initial visibility.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 
 <template>
   <div id="app">
-    <button v-on:click="toggleFDToolbar">Toggle Form Designer Toolbar</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
+    <ejs-pdfviewer id="PdfViewer" ref="pdfviewer" :isFormDesignerToolbarVisible="true" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height: 500px; width: 100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -38,22 +42,13 @@ import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
   ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
 } from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
+import { provide } from 'vue';
 
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/formdesigner.pdf";
+const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
 const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
 
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
-
-const toggleFDToolbar = () => {
-  const toolbar = pdfviewer.value?.ej2Instances?.toolbar;
-  if (toolbar) {
-    // Pass false to hide, true to show
-    toolbar.showFormDesignerToolbar(false);
-  }
-}
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
 </script>
 
 {% endhighlight %}
@@ -61,8 +56,7 @@ const toggleFDToolbar = () => {
 
 <template>
   <div id="app">
-    <button v-on:click="toggleFDToolbar">Toggle Form Designer Toolbar</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
+    <ejs-pdfviewer id="PdfViewer" ref="pdfviewer" :isFormDesignerToolbarVisible="true" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height: 500px; width: 100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -74,22 +68,19 @@ import {
 } from '@syncfusion/ej2-vue-pdfviewer';
 
 export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  name: "App",
+  components: {
+    "ejs-pdfviewer": PdfViewerComponent
+  },
   data() {
     return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf',
-      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
+      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
+      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
     };
   },
   provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-      ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    toggleFDToolbar() {
-      this.$refs.pdfviewer.ej2Instances.toolbar.showFormDesignerToolbar(false);
-    }
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+      BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
   }
 }
 </script>
@@ -97,46 +88,48 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-N> To set up the server-backed PDF Viewer, add the following serviceUrl in your component and bind it to the PDF Viewer using :serviceUrl="serviceUrl".
-serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+### 2. Show or hide form designer toolbar at runtime
+
+Use the [`isFormDesignerToolbarVisible`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#isformdesignertoolbarvisible) property on the viewer's instance to toggle form designer visibility at runtime.
 
 {% tabs %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
+{% highlight ts tabtitle="Composition API (~/src/App.vue)" %}
 
 <template>
   <div id="app">
-    <button v-on:click="toggleFDToolbar">Toggle Form Designer Toolbar</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl">
+    <button @click="hideFormDesignerToolbar">Hide Form Designer Toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="pdfviewer" :isFormDesignerToolbarVisible="show" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height: 500px; width: 100%">
     </ejs-pdfviewer>
   </div>
 </template>
 
 <script setup>
+import { ref, provide } from 'vue';
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
   ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
 } from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
 
 const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/formdesigner.pdf";
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
+const show = ref(true);
+const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
 
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
 
-const toggleFDToolbar = () => {
-  pdfviewer.value.ej2Instances.toolbar.showFormDesignerToolbar(false);
-}
+const hideFormDesignerToolbar = () => {
+  show.value = !show.value;
+};
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 
 <template>
   <div id="app">
-    <button v-on:click="toggleFDToolbar">Toggle Form Designer Toolbar</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl">
+    <button @click="hideFormDesignerToolbar">Hide Form Designer Toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="pdfviewer" :isFormDesignerToolbarVisible="show" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height: 500px; width: 100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -148,21 +141,24 @@ import {
 } from '@syncfusion/ej2-vue-pdfviewer';
 
 export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  name: "App",
+  components: {
+    "ejs-pdfviewer": PdfViewerComponent
+  },
   data() {
     return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf',
-      serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
+      show: true,
+      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
+      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
     };
   },
   provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-      ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+      BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
   },
   methods: {
-    toggleFDToolbar() {
-      this.$refs.pdfviewer.ej2Instances.toolbar.showFormDesignerToolbar(false);
+    hideFormDesignerToolbar() {
+      this.show = !this.show;
     }
   }
 }
@@ -171,60 +167,56 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-## How to customize the form designer toolbar
-
-Select which tools appear and control their order in the form designer toolbar.
+### 3. Show or hide form designer toolbar items
 
-Configure [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarsettings) and set the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarsettings#formdesignertoolbaritems) property to specify available form-design tools. This property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesignertoolbaritem) values; included items are displayed in the listed order and omitted items are hidden. This produces a consistent, streamlined form-design experience across devices.
+Use [`formDesignerToolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarsettings#formdesignertoolbaritems) and supply an ordered array of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesignertoolbaritem) names.
 
-- ToolbarSettings: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/
-- formDesignerToolbarItems: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems
-- FormDesignerToolbarItem: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formDesignerToolbarItem/
-
-The following example demonstrates how to customize the form designer toolbar by configuring specific tools using FormDesignerToolbarItem.
+**Complete example:**
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 
 <template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings">
+  <div>
+    <button @click="hideFormDesignerToolbar">Hide Form Designer Toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="pdfviewer" :isFormDesignerToolbarVisible="show" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings" style="height: 500px; width: 100%">
     </ejs-pdfviewer>
   </div>
 </template>
 
 <script setup>
+import { ref, provide } from 'vue';
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
   ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
 } from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
 
-const documentPath = 'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf';
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+const pdfviewer = ref(null);
+const show = ref(true);
+const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
 const toolbarSettings = {
   formDesignerToolbarItems: [
-    'TextboxTool',
-    'PasswordTool',
-    'CheckBoxTool',
-    'RadioButtonTool',
-    'DropdownTool',
-    'ListboxTool',
-    'DrawSignatureTool',
-    'DeleteTool'
+    'TextboxTool', 'RadioButtonTool', 'CheckBoxTool',
+    'DropdownTool', 'ListboxTool', 'DrawSignatureTool', 'DeleteTool'
   ]
 };
 
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
+
+const hideFormDesignerToolbar = () => {
+  show.value = !show.value;
+};
 </script>
 
 {% endhighlight %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
 
 <template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings">
+  <div>
+    <button @click="hideFormDesignerToolbar">Hide Form Designer Toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="pdfviewer" :isFormDesignerToolbarVisible="show" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings" style="height: 500px; width: 100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -236,29 +228,31 @@ import {
 } from '@syncfusion/ej2-vue-pdfviewer';
 
 export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  name: "App",
+  components: {
+    "ejs-pdfviewer": PdfViewerComponent
+  },
   data() {
     return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf',
-      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
+      show: true,
+      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
+      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
       toolbarSettings: {
         formDesignerToolbarItems: [
-          'TextboxTool',
-          'PasswordTool',
-          'CheckBoxTool',
-          'RadioButtonTool',
-          'DropdownTool',
-          'ListboxTool',
-          'DrawSignatureTool',
-          'DeleteTool'
+          'TextboxTool', 'RadioButtonTool', 'CheckBoxTool',
+          'DropdownTool', 'ListboxTool', 'DrawSignatureTool', 'DeleteTool'
         ]
       }
     };
   },
   provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-      ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+      BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
+  },
+  methods: {
+    hideFormDesignerToolbar() {
+      this.show = !this.show;
+    }
   }
 }
 </script>
@@ -266,86 +260,18 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-N> To set up the server-backed PDF Viewer, add the following serviceUrl in the component and bind it using :serviceUrl="serviceUrl".
-serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :toolbarSettings="toolbarSettings">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
-
-const documentPath = 'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf';
-const serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
-const toolbarSettings = {
-  formDesignerToolbarItems: [
-    'TextboxTool', 'PasswordTool', 'CheckBoxTool', 'RadioButtonTool', 'DropdownTool',
-    'ListboxTool', 'DrawSignatureTool', 'DeleteTool'
-  ]
-};
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]);
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :toolbarSettings="toolbarSettings">
-    </ejs-pdfviewer>
-  </div>
-</template>
+## Expected result
 
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
+- The form designer toolbar appears (or is hidden) according to [`isFormDesignerToolbarVisible`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#isformdesignertoolbarvisible).
+- Only the listed tools appear.
 
-export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
-  data() {
-    return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf',
-      serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer',
-      toolbarSettings: {
-        formDesignerToolbarItems: [
-          'TextboxTool', 'PasswordTool', 'CheckBoxTool', 'RadioButtonTool', 'DropdownTool',
-          'ListboxTool', 'DrawSignatureTool', 'DeleteTool'
-        ]
-      }
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-      ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]
-  }
-}
-</script>
+## Troubleshooting
 
-{% endhighlight %}
-{% endtabs %}
+- Toolbar or form designer tools do not appear.
+    - **Cause**: [`FormDesigner`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) or [`Toolbar`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar) service not provided.
+    - **Solution**: ensure [`FormDesigner`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) and [`Toolbar`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar) services are provided to PDF Viewer.
 
-## See also
+## Related topics
 
-* [Primary toolbar customization](./primary-toolbar)
-* [Custom toolbar](./custom-toolbar)
-* [Annotation toolbar customization](./annotation-toolbar)
-* [Form designer toolbar customization](./form-designer-toolbar)
-* [Mobile toolbar](./mobile-toolbar)
-* [Toolbar customization](../toolbar)
-* [Feature Modules](../feature-module)
+- [Primary toolbar customization](./primary-toolbar)
+- [Annotation toolbar customization](./annotation-toolbar)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md
index c5de45c035..88684c5405 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md
@@ -1,144 +1,86 @@
 ---
 layout: post
-title: Mobile Toolbar Interface in Vue PDF Viewer Component | Syncfusion
-description: Learn all about the mobile toolbar interface in Syncfusion Vue PDF Viewer component of Essential JS 2 and more.
+title: Customize mobile toolbar in Vue PDF Viewer | Syncfusion
+description: Learn how to customize the toolbar for mobile devices in the Syncfusion Vue PDF Viewer and ensure smooth touch interactions.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Mobile Toolbar Interface in Vue PDF Viewer Component
+# Customize mobile toolbar in Vue PDF Viewer
 
-The Mobile PDF Viewer provides features for viewing, searching, annotating, and managing PDF documents on mobile devices. It exposes core tools such as search, download, bookmarking, annotation, and page organization. The desktop toolbar can also be enabled in mobile mode to expose additional actions when required.
+## Overview
 
-## Mobile Mode Toolbar Configuration
+This guide shows you how to enable the desktop toolbar on mobile devices running the Vue PDF Viewer, and how to preserve touch scrolling when the desktop toolbar is used.
 
-In mobile mode, the toolbar is optimized for small screens and presents the most common actions for interacting with a PDF document. The following key features are available in mobile mode:
+**Outcome**: a working Vue example that displays the desktop toolbar on mobile devices with smooth scrolling enabled.
 
-![Mobile toolbar with primary PDF interaction options](../images/mobileToolbar.png)
+## Prerequisites
 
-### Main Toolbar Options
+- EJ2 Vue PDF Viewer installed and added in project. See [getting started guide](../getting-started)
+- For standalone mode: a valid [`resourceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourceurl) hosting the PDF Viewer assets.
+- For server-backed mode: a working [`serviceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#serviceurl) endpoint.
 
-- OpenOption: Tap to load a PDF document.
-- SearchOption: Access the search bar to find text within the document.
+## Steps
 
-![Search bar displayed for finding text within a PDF](../images/searchOption.png)
+### Step 1: Enable desktop toolbar on mobile
 
-- UndoRedoTool: Quickly undo or redo any annotations made.
-- OrganizePagesTool: Enable or disable page organization features to modify document pages.
+Set [`enableDesktopMode`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enabledesktopmode) to `true` on the PDF Viewer to display the desktop toolbar on mobile devices.
 
-![Page organization interface for modifying PDF pages](../images/organizePages.png)
+### Step 2: (Optional, recommended) Disable text-selection for smooth scrolling
 
-- AnnotationEditTool: Activate or deactivate annotation editing to add or modify annotations.
+Set [`enableTextSelection`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enabletextselection) to `false` to preserve smooth touch scrolling and prevent text-selection from capturing touch events.
 
-![Annotation editing toolbar allowing users to add, edit, or delete annotations on a PDF](../images/editAnnotation.png)
+### Step 3: Inject required services
 
-N> In mobile mode, the annotation toolbar is displayed at the bottom of the viewer.
+Inject the [`Toolbar`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar) and other services required by your toolbar features.
 
-### More Options Menu
-When you open the more options menu, you will see additional actions such as:
-
-- DownloadOption: Download the currently opened PDF document.
-- BookmarkOption: View bookmarks within the document.
-
-![More options menu showing additional actions like download and bookmark](../images/more-options.png)
-
-## Enable Desktop Mode in Mobile
-
-The desktop toolbar can be enabled on mobile devices by setting the `enableDesktopMode` option. Enabling this option exposes desktop-style toolbar actions in the mobile PDF Viewer.
-
-### Steps to Enable Desktop Mode
-
-**Step 1:** Set `enableDesktopMode` to true in the component configuration.
-**Step 2:** The viewer will use the desktop toolbar layout, granting access to additional actions and controls.
+**Complete example:**
 
 {% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
+{% highlight html tabtitle="Standalone (Composition API - ~/src/App.vue)" %}
 
 <template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :enableDesktopMode="true">
+  <div>
+    <ejs-pdfviewer
+      id="PdfViewer"
+      ref="pdfviewer"
+      :enableDesktopMode="true"
+      :enableTextSelection="false"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      style="height: 640px; width: 100%; display: block;">
     </ejs-pdfviewer>
   </div>
 </template>
 
 <script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
-} from '@syncfusion/ej2-vue-pdfviewer';
 import { provide } from 'vue';
-
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
-  TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :enableDesktopMode="true">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
-  data() {
-    return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
-      TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :enableDesktopMode="true">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
   ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
 
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
 
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
-  TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
+{% highlight html tabtitle="Standalone (Options API - ~/src/App.vue)" %}
 
 <template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :enableDesktopMode="true">
+  <div>
+    <ejs-pdfviewer
+      id="PdfViewer"
+      ref="pdfviewer"
+      :enableDesktopMode="true"
+      :enableTextSelection="false"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      style="height: 640px; width: 100%; display: block;">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -151,70 +93,9 @@ import {
 
 export default {
   name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
-  data() {
-    return {
-      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-      serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
-    };
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent
   },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
-      TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
-  }
-}
-</script>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable Scrolling in Desktop Mode with Touch Gestures
-
-To ensure smooth touch scrolling of documents on mobile devices when the desktop toolbar is enabled, set the `enableTextSelection` option to **false**. This disables text-selection interactions that can interfere with touch-based scrolling.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :enableDesktopMode="true" :enableTextSelection="false">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
-
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
-  TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :enableDesktopMode="true" :enableTextSelection="false">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
   data() {
     return {
       documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
@@ -222,42 +103,54 @@ export default {
     };
   },
   provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
-      TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
   }
 }
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
+{% highlight html tabtitle="Server-Backed (Composition API - ~/src/App.vue)" %}
 
 <template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :enableDesktopMode="true" :enableTextSelection="false">
+  <div>
+    <ejs-pdfviewer
+      id="PdfViewer"
+      ref="pdfviewer"
+      :enableDesktopMode="true"
+      :enableTextSelection="false"
+      :documentPath="documentPath"
+      :serviceUrl="serviceUrl"
+      style="height: 640px; width: 100%; display: block;">
     </ejs-pdfviewer>
   </div>
 </template>
 
 <script setup>
+import { provide } from 'vue';
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
   ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
 
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+const serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
 
-provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
-  TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
+{% highlight html tabtitle="Server-Backed (Options API - ~/src/App.vue)" %}
 
 <template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :serviceUrl="serviceUrl" :enableDesktopMode="true" :enableTextSelection="false">
+  <div>
+    <ejs-pdfviewer
+      id="PdfViewer"
+      ref="pdfviewer"
+      :enableDesktopMode="true"
+      :enableTextSelection="false"
+      :documentPath="documentPath"
+      :serviceUrl="serviceUrl"
+      style="height: 640px; width: 100%; display: block;">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -270,16 +163,17 @@ import {
 
 export default {
   name: 'App',
-  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent
+  },
   data() {
     return {
       documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-      serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
+      serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
     };
   },
   provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
-      TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
   }
 }
 </script>
@@ -287,22 +181,32 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-## Print Option Not Available in Mobile Mode
+## Expected result
+
+- The desktop toolbar appears on mobile devices, showing all toolbar features.
+- Touch scrolling is smooth without jank or interference from text selection.
+- All toolbar buttons (Zoom, Navigation, Print, Annotations) function correctly on touch devices.
+
+## Troubleshooting
 
-The Print option is not available in mobile mode by default. Enabling the desktop toolbar on mobile via `enableDesktopMode` makes the Print option available.
+- Print option not visible on mobile.
+    - **Cause**: [`enableDesktopMode`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enabledesktopmode) is `false`; the mobile toolbar omits Print.
+    - **Solution**: set [`enableDesktopMode`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enabledesktopmode) to `true`.
 
-### How to Use Print on Mobile:
+- Touch scrolling is jerky after enabling desktop toolbar.
+    - **Cause**: Text-selection is capturing touch events.
+    - **Solution**: set [`enableTextSelection`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enabletextselection) to `false` to disable text-selection on touch devices.
 
-- Set `enableDesktopMode` to true to load the desktop toolbar on mobile.
-- After enabling desktop mode, the Print option appears in the toolbar and can be used to print the document from the mobile device.
+- Missing assets or broken UI.
+    - **Cause**: [`resourceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourceurl) is incorrect or unreachable.
+    - **Solution**: confirm [`resourceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourceurl) points to the correct version of `ej2-pdfviewer-lib` and is reachable from the device.
 
-N> Print functionality remains unavailable in the default mobile toolbar unless desktop mode is enabled.
+- Server errors in server-backed mode.
+    - **Cause**: [`serviceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#serviceurl) CORS configuration or backend connectivity issue.
+    - **Solution**: verify [`serviceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#serviceurl) CORS configuration and that the back end is running.
 
-## See also
+## Related topics
 
-* [Primary toolbar customization](./primary-toolbar)
-* [Custom toolbar](./custom-toolbar)
-* [Annotation toolbar customization](./annotation-toolbar)
-* [Form designer toolbar customization](./form-designer-toolbar)
-* [Toolbar customization](../toolbar)
-* [Feature Modules](../feature-module)
\ No newline at end of file
+- [Customize form designer toolbar](./form-designer-toolbar)
+- [Customize annotation toolbar](./annotation-toolbar)
+- [Create a custom toolbar](./custom-toolbar)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/overview.md
new file mode 100644
index 0000000000..bd674941c7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/overview.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Toolbar in Vue PDF Viewer component | Syncfusion
+description: Learn about the various toolbars available in the Syncfusion Vue PDF Viewer and how they help users access key PDF features.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Toolbar in Vue PDF Viewer
+
+## Overview
+
+This page provides a concise reference describing the toolbars available in the EJ2 Vue PDF Viewer component. It also explains what each toolbar is for and when it appears.
+
+**Scope**: covers available toolbars and their functions.
+
+## List of available toolbars
+
+- [Primary toolbar](#primary-toolbar)
+- [Annotation toolbar](#annotation-toolbar)
+- [Form Designer toolbar](#form-designer-toolbar)
+- [Mobile toolbar](#mobile-toolbar)
+- [Custom toolbar](./custom-toolbar)
+
+## Functional overview of each toolbar
+
+### Primary toolbar
+
+The primary toolbar presents core viewer actions such as open/load, page navigation, zoom controls, and print. It appears in standard desktop layouts and at the top of the viewer when `Toolbar` service is provided. Typical actions: page forward/back, zoom in/out, fit-to-page, print.
+
+![primary desktop toolbar](../images/primary-toolbar.png)
+
+### Annotation toolbar
+
+The annotation toolbar surfaces annotation-related tools for adding, editing, and deleting annotations (text markup, shapes, stamps). It appears when annotation services are enabled and when a user opens annotation mode. Typical actions: highlight, underline, draw shape, add sticky note, delete annotation.
+
+![annotation desktop toolbar](../images/annotation-toolbar.png)
+
+### Form Designer toolbar
+
+Form designer toolbar provides form-field authoring controls used when designing or editing form fields inside a PDF. It appears when `FormDesigner` is enabled (design mode) and contains actions for adding form field controls.
+
+![form designer toolbar](../images/FormDesigner.png)
+
+### Mobile toolbar
+
+- A compact toolbar layout optimized for small screens and touch interactions. It appears automatically on mobile-sized view ports (or when a mobile layout is explicitly chosen) and contains the most frequently used actions in a space-efficient arrangement.
+
+    ![mobile toolbar](../images/mobile-toolbar.png)
+
+- Annotation toolbar in mobile mode appears at the bottom of the PDF Viewer component.
+
+    ![mobile annotation toolbar](../images/mobile-annotation-toolbar.png)
+
+## Show or hide toolbar items
+
+The following quick links describe how to customize, show, or hide specific toolbar items. Each linked page defines custom toolbar configurations and examples.
+
+- [Show or hide annotation toolbar items](./annotation-toolbar#show-or-hide-annotation-toolbar-items)
+- [Show or hide form designer toolbar items](./form-designer-toolbar#show-or-hide-form-designer-toolbar-items)
+- [Show or hide primary toolbar items](./primary-toolbar#show-or-hide-primary-toolbar-items)
+- [Add a custom primary toolbar item](./primary-toolbar#add-a-custom-primary-toolbar-item)
+
+## Further Reading
+
+- [Customize annotation toolbar](./annotation-toolbar)
+- [Customize form designer toolbar](./form-designer-toolbar)
+- [Customize mobile toolbar](./mobile-toolbar)
+- [Customize primary toolbar](./primary-toolbar)
+- [Create a custom toolbar](./custom-toolbar)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/primary-toolbar.md
index c15e7fc354..78b79db814 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/primary-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/primary-toolbar.md
@@ -1,22 +1,30 @@
 ---
 layout: post
-title: Primary Toolbar Customization in Vue PDF Viewer Component | Syncfusion
-description: Learn how to show or hide the built-in primary toolbar and customize it in the Syncfusion Vue PDF Viewer component.
+title: Customize the Primary Toolbar in Vue PDF Viewer | Syncfusion
+description: Learn how to show or hide, reorder, and add items to the primary toolbar in the Syncfusion EJ2 Vue PDF Viewer.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Primary Toolbar Customization in Vue PDF Viewer
+# Customize the Primary Toolbar in Vue PDF Viewer
 
-The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be inserted at a specific index among existing toolbar items to control placement.
+## Overview
 
-## Show or hide the primary toolbar
+This guide explains how to show or hide the primary toolbar, remove default items, and add custom toolbar items.
 
-Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. When a custom toolbar is required, hide the built-in toolbar. Use the [enableToolbar](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pdfviewermodel#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar#showtoolbar) method to show or hide the primary toolbar.
+**Outcome**: Working Vue example customizing the primary toolbar.
 
-Show or hide the toolbar using the `enableToolbar` property:
+## Prerequisites
+
+- EJ2 Vue PDF Viewer installed and added in project. See [getting started guide](../getting-started)
+
+## Steps
+
+### 1. Show or hide primary toolbar at initialization
+
+Set [`enableToolbar`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pdfviewermodel#enabletoolbar) to `false` to hide the built-in toolbar.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -82,18 +90,17 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-N> To set up the server-backed PDF Viewer in the App.vue file, include the following serviceUrl:
-serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
-Within the template, configure the PDF Viewer by adding the :serviceUrl="serviceUrl" attribute.
+### 2. Show or hide primary toolbar at runtime
 
-The following code snippet explains how to show or hide the toolbar using the showToolbar method.
+Use the viewer's [`showToolbar()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar#showtoolbar) method to show or hide dynamically.
 
 {% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight ts tabtitle="Composition API (~/src/App.vue)" %}
 
 <template>
   <div id="app">
-    <button v-on:click="showToolbarClicked">showToolbarClicked</button>
+    <button @click="hideToolbar">Hide Toolbar</button>
+    <button @click="showToolbar">Show Toolbar</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
     </ejs-pdfviewer>
   </div>
@@ -114,9 +121,12 @@ const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-li
 provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
   ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
 
-const showToolbarClicked = function () {
+const hideToolbar = () => {
   pdfviewer.value.ej2Instances.toolbar.showToolbar(false);
 }
+const showToolbar = () => {
+  pdfviewer.value.ej2Instances.toolbar.showToolbar(true);
+}
 </script>
 
 {% endhighlight %}
@@ -124,7 +134,8 @@ const showToolbarClicked = function () {
 
 <template>
   <div id="app">
-    <button v-on:click="showToolbarClicked">showToolbarClicked</button>
+    <button @click="hideToolbar">Hide Toolbar</button>
+    <button @click="showToolbar">Show Toolbar</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
     </ejs-pdfviewer>
   </div>
@@ -153,8 +164,11 @@ export default {
       ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
   },
   methods: {
-    showToolbarClicked: function () {
+    hideToolbar: function () {
       this.$refs.pdfviewer.ej2Instances.toolbar.showToolbar(false);
+    },
+    showToolbar: function (){
+      this.$refs.pdfviewer.ej2Instances.toolbar.showToolbar(true);
     }
   }
 }
@@ -163,15 +177,218 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-N> To set up the server-backed PDF Viewer in the App.vue file, include the following serviceUrl:
-serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
-Within the template, configure the PDF Viewer by adding the :serviceUrl="serviceUrl" attribute.
+### 3. Show or hide primary toolbar items
+
+Provide the [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarsettings#toolbaritems) array with the exact set and order of items you want to show. Any item omitted is hidden.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :toolbarSettings="toolbarSettings" :resourceUrl="resourceUrl">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script setup>
+import {
+  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
+  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
+  Annotation, FormDesigner, FormFields
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { provide } from 'vue';
+
+const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
+const toolbarSettings = {
+  toolbarItems: ['OpenOption', 'DownloadOption', 'PrintOption', 'MagnificationTool']
+};
+
+provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
+  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
+
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :toolbarSettings="toolbarSettings" :resourceUrl="resourceUrl">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
+  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
+  Annotation, FormDesigner, FormFields
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-pdfviewer": PdfViewerComponent
+  },
+  data() {
+    return {
+      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
+      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
+      toolbarSettings: {
+        toolbarItems: ['OpenOption', 'DownloadOption', 'PrintOption', 'MagnificationTool']
+      }
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
+      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
+  }
+}
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+### 4. Add a custom primary toolbar item
+
+Add a custom item by including an object in [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarsettings#toolbaritems) and handling its action via [`toolbarClick`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#toolbarclick). The following example shows adding a simple custom button at initialization and wiring its `toolbarClick` handler.
+
+**Complete example:**
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+<template>
+  <div>
+    <button @click="toggleToolbar">{{ showTool ? 'Hide' : 'Show' }} toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="pdfviewerRef" :enableNavigationToolbar="false" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings" @toolbarClick="handleToolbarClick" style="height: 500px">
+      <template></template>
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script setup>
+import { ref, provide } from 'vue';
+import {
+  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+const pdfviewerRef = ref(null);
+const showTool = ref(true);
+const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
+
+const toolbarSettings = {
+  toolbarItems: [
+    'OpenOption',
+    {
+      id: 'custom_btn',
+      text: 'Fit to Width',
+      align: 'Center'
+    },
+    'DownloadOption'
+  ]
+};
+
+provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
+
+const toggleToolbar = () => {
+  pdfviewerRef.value.ej2Instances.toolbar.showToolbar(showTool.value);
+  showTool.value = !showTool.value;
+};
+
+const handleToolbarClick = (event) => {
+  if (event.item.id === 'custom_btn') {
+    handleFitToWidth();
+  }
+};
+
+const handleFitToWidth = () => {
+  pdfviewerRef.value.ej2Instances.magnification.fitToWidth();
+};
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+<template>
+  <div>
+    <button @click="toggleToolbar">{{ showTool ? 'Hide' : 'Show' }} toolbar</button>
+    <ejs-pdfviewer id="PdfViewer" ref="pdfviewerRef" :enableNavigationToolbar="false" :documentPath="documentPath" :resourceUrl="resourceUrl" :toolbarSettings="toolbarSettings" @toolbarClick="handleToolbarClick" style="height: 500px">
+      <template></template>
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-pdfviewer": PdfViewerComponent
+  },
+  data() {
+    return {
+      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
+      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
+      showTool: true,
+      toolbarSettings: {
+        toolbarItems: [
+          'OpenOption',
+          {
+            id: 'custom_btn',
+            text: 'Fit to Width',
+            align: 'Center'
+          },
+          'DownloadOption'
+        ]
+      }
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+      BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]
+  },
+  methods: {
+    toggleToolbar() {
+      this.$refs.pdfviewerRef.ej2Instances.toolbar.showToolbar(this.showTool);
+      this.showTool = !this.showTool;
+    },
+    handleToolbarClick(event) {
+      if (event.item.id === 'custom_btn') {
+        this.handleFitToWidth();
+      }
+    },
+    handleFitToWidth() {
+      this.$refs.pdfviewerRef.ej2Instances.magnification.fitToWidth();
+    }
+  }
+}
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+## Expected result
+
+- The primary toolbar shows only the items you list in [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarsettings#toolbaritems).
+- Clicking the toggle button calls [`showToolbar()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar#showtoolbar) and hides or shows the toolbar at runtime.
+- Custom toolbar items respond to [`toolbarClick`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#toolbarclick) events.
+
+## Troubleshooting
+
+- Toolbar still shows all default items.
+    - **Solution**: [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarsettings#toolbaritems) must be supplied exactly; verify names and that [`Toolbar`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar) service is provided.
 
-## See also
+## Related topics
 
-* [Custom toolbar](./custom-toolbar)
-* [Annotation toolbar customization](./annotation-toolbar)
-* [Form designer toolbar customization](./form-designer-toolbar)
-* [Mobile toolbar](./mobile-toolbar)
-* [Toolbar customization](../toolbar)
-* [Feature Modules](../feature-module)
\ No newline at end of file
+- [Annotation toolbar customization](./annotation-toolbar)
+- [Form designer toolbar customization](./form-designer-toolbar)
\ No newline at end of file

From 74b3f3215274753bef9124b9db5f44d0f13bcfd3 Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Thu, 20 Aug 2026 19:30:34 +0530
Subject: [PATCH 2/2] 1038023: Resolved CI failures

---
 .../vue/toolbar-customization/annotation-toolbar.md    |  2 +-
 .../vue/toolbar-customization/mobile-toolbar.md        |  4 ++--
 .../PDF-Viewer/vue/toolbar-customization/overview.md   | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/annotation-toolbar.md
index 8faf124ab8..70039eb230 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/annotation-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/annotation-toolbar.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Customize the Annotation Toolbar in Vue PDF Viewer | Syncfusion
-description: Show or hide and customize the annotation toolbar in the EJ2 Vue PDF Viewer with runnable examples.
+description: Learn here all about how to Show or hide and customize the annotation toolbar in the EJ2 Vue PDF Viewer with runnable examples.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md
index 88684c5405..592a93798b 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md
@@ -184,7 +184,7 @@ export default {
 ## Expected result
 
 - The desktop toolbar appears on mobile devices, showing all toolbar features.
-- Touch scrolling is smooth without jank or interference from text selection.
+- Touch scrolling is smooth without lag or interference from text selection.
 - All toolbar buttons (Zoom, Navigation, Print, Annotations) function correctly on touch devices.
 
 ## Troubleshooting
@@ -202,7 +202,7 @@ export default {
     - **Solution**: confirm [`resourceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourceurl) points to the correct version of `ej2-pdfviewer-lib` and is reachable from the device.
 
 - Server errors in server-backed mode.
-    - **Cause**: [`serviceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#serviceurl) CORS configuration or backend connectivity issue.
+    - **Cause**: [`serviceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#serviceurl) CORS configuration or back-end connectivity issue.
     - **Solution**: verify [`serviceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#serviceurl) CORS configuration and that the back end is running.
 
 ## Related topics
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/overview.md
index bd674941c7..f558f7fc96 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/overview.md
@@ -30,29 +30,29 @@ This page provides a concise reference describing the toolbars available in the
 
 The primary toolbar presents core viewer actions such as open/load, page navigation, zoom controls, and print. It appears in standard desktop layouts and at the top of the viewer when `Toolbar` service is provided. Typical actions: page forward/back, zoom in/out, fit-to-page, print.
 
-![primary desktop toolbar](../images/primary-toolbar.png)
+![primary desktop toolbar](../../react/images/primary-toolbar.png)
 
 ### Annotation toolbar
 
 The annotation toolbar surfaces annotation-related tools for adding, editing, and deleting annotations (text markup, shapes, stamps). It appears when annotation services are enabled and when a user opens annotation mode. Typical actions: highlight, underline, draw shape, add sticky note, delete annotation.
 
-![annotation desktop toolbar](../images/annotation-toolbar.png)
+![annotation desktop toolbar](../../react/images/annotation-toolbar.png)
 
 ### Form Designer toolbar
 
 Form designer toolbar provides form-field authoring controls used when designing or editing form fields inside a PDF. It appears when `FormDesigner` is enabled (design mode) and contains actions for adding form field controls.
 
-![form designer toolbar](../images/FormDesigner.png)
+![form designer toolbar](../../react/images/FormDesigner.png)
 
 ### Mobile toolbar
 
 - A compact toolbar layout optimized for small screens and touch interactions. It appears automatically on mobile-sized view ports (or when a mobile layout is explicitly chosen) and contains the most frequently used actions in a space-efficient arrangement.
 
-    ![mobile toolbar](../images/mobile-toolbar.png)
+    ![mobile toolbar](../../react/images/mobile-toolbar.png)
 
 - Annotation toolbar in mobile mode appears at the bottom of the PDF Viewer component.
 
-    ![mobile annotation toolbar](../images/mobile-annotation-toolbar.png)
+    ![mobile annotation toolbar](../../react/images/mobile-annotation-toolbar.png)
 
 ## Show or hide toolbar items