SyncfusionExamples · GokulprasathVenkatachalam · Jun 5, 2026 · Jun 5, 2026
diff --git a/Getting Started Vue-3 - Standalone/.vscode/extensions.json b/Getting Started Vue-3 - Standalone/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/Getting Started Vue-3 - Standalone/README.md b/Getting Started Vue-3 - Standalone/README.md
@@ -1,7 +1,5 @@
-# Vue 3 + Vite
+# Vue 3 + TypeScript + Vite
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
diff --git a/Getting Started Vue-3 - Standalone/index.html b/Getting Started Vue-3 - Standalone/index.html
@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>vue 3 getting started</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/Getting Started Vue-3 - Standalone/package.json b/Getting Started Vue-3 - Standalone/package.json
@@ -1,19 +1,23 @@
 {
-  "name": "getting-started-server-back",
+  "name": "vue3-project",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@syncfusion/ej2-vue-pdfviewer": "*",
-    "vue": "^3.2.47"
+    "vue": "^3.5.34"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "vite": "^5.4.20"
+    "@types/node": "^24.12.3",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12",
+    "vue-tsc": "^3.2.8"
   }
 }
diff --git a/Getting Started Vue-3 - Standalone/public/favicon.svg b/Getting Started Vue-3 - Standalone/public/favicon.svg
diff --git a/Getting Started Vue-3 - Standalone/public/icons.svg b/Getting Started Vue-3 - Standalone/public/icons.svg
diff --git a/Getting Started Vue-3 - Standalone/src/App.vue b/Getting Started Vue-3 - Standalone/src/App.vue
@@ -1,45 +1,68 @@
 <template>
-  <ejs-pdfviewer 
-    id="pdfViewer" 
-    :documentPath="documentPath"
-    :style="{ height: '800px', width: '1200px' }"
-    :resourceUrl="resourceUrl">
+  <ejs-pdfviewer
+    id="pdfViewer"
+    :resourceUrl="resourceUrl"
+    :documentPath="documentPath">
   </ejs-pdfviewer>
 </template>
-
+ 
 <script>
-  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
-           ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
-
-  export default {
-    name: 'App',
-    // Declaring component and its directives
-    components: {
-      "ejs-pdfviewer": PdfViewerComponent
-    },
-
-    data() {
-      return {
-        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
-        resourceUrl: 'https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib'
-
-      };
-    },
-    provide: {
-      PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-                   Print, TextSelection, TextSearch, Annotation, FormDesigner, FormField, PageOrganizer ]
-    }
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  LinkAnnotation,
+  BookmarkView,
+  ThumbnailView,
+  Print,
+  TextSelection,
+  TextSearch,
+  Annotation,
+  FormDesigner,
+  FormFields,
+  PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: {
+    "ejs-pdfviewer": PdfViewerComponent
+  },
+  data() {
+    return {
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
+    };
+  },
+  provide: {
+    PdfViewer: [
+      Toolbar,
+      Magnification,
+      Navigation,
+      LinkAnnotation,
+      BookmarkView,
+      ThumbnailView,
+      Print,
+      TextSelection,
+      TextSearch,
+      Annotation,
+      FormDesigner,
+      FormFields,
+      PageOrganizer
+    ]
   }
-</script>
+};
 
+</script>
 <style>
-  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
-  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
-  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-vue-pdfviewer/styles/material.css';
-</style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
+</style>
diff --git a/Getting Started Vue-3 - Standalone/src/assets/hero.png b/Getting Started Vue-3 - Standalone/src/assets/hero.png