857163-sampleUpdate : GitHub samples for vue 3 standalone and server …

…back component is added
SyncfusionExamples · Nov 30, 2023 · 8f2251f · 8f2251f
1 parent e99976c
commit 8f2251f
Show file tree

Hide file tree

Showing 18 changed files with 165 additions and 47 deletions.
diff --git a/Getting Started Vue-3 - Standalone/.gitignore b/Getting Started Vue-3 - Standalone/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Getting Started Vue-3 - Standalone/README.md b/Getting Started Vue-3 - Standalone/README.md
@@ -0,0 +1,7 @@
+# Vue 3 + 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.
+
+## 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).
diff --git a/Getting Started Vue-3 - Standalone/index.html b/Getting Started Vue-3 - Standalone/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.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>
+  </body>
+</html>
diff --git a/Getting Started Vue-3 - Standalone/package.json b/Getting Started Vue-3 - Standalone/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-vue-pdfviewer": "*",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "vite": "^4.3.9"
+  }
+}
diff --git a/Getting Started Vue-3/src/App.vue → ...ng Started Vue-3 - Standalone/src/App.vue b/Getting Started Vue-3/src/App.vue → ...ng Started Vue-3 - Standalone/src/App.vue
@@ -1,47 +1,45 @@
-<template>
-  <ejs-pdfviewer 
-    id="pdfViewer" 
-    :documentPath="documentPath"
-    :style="{ height: '800px', width: '1200px' }"
-    :resourceUrl="resourceUrl">
-  </ejs-pdfviewer>
-</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',
-    // Declaring component and its directives
-    components: {
-      "ejs-pdfviewer": PdfViewerComponent
-    },
-
-    data() {
-      return {
-        // To set up the **server-backed PDF Viewer** in the app.vue file, include the following serviceUrl. Within the template, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the <div> element
-        // serviceUrl: "https://services.syncfusion.com/vue/production/api/pdfviewer",
-        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, FormFields ]
-    }
-  }
-</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';
+<template>
+  <ejs-pdfviewer 
+    id="pdfViewer" 
+    :documentPath="documentPath"
+    :style="{ height: '800px', width: '1200px' }"
+    :resourceUrl="resourceUrl">
+  </ejs-pdfviewer>
+</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',
+    // 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, FormFields ]
+    }
+  }
+</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>
diff --git a/Getting Started Vue-3/src/assets/vue.svg → ...ted Vue-3 - Standalone/src/assets/vue.svg b/Getting Started Vue-3/src/assets/vue.svg → ...ted Vue-3 - Standalone/src/assets/vue.svg
diff --git a/Getting Started Vue-3 - Standalone/src/main.js b/Getting Started Vue-3 - Standalone/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/Getting Started Vue-3/src/style.css → ... Started Vue-3 - Standalone/src/style.css b/Getting Started Vue-3/src/style.css → ... Started Vue-3 - Standalone/src/style.css
diff --git a/Getting Started Vue-3 - Standalone/vite.config.js b/Getting Started Vue-3 - Standalone/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
diff --git a/Getting Started Vue-3/.gitignore → ...ng Started Vue-3 - server-back/.gitignore b/Getting Started Vue-3/.gitignore → ...ng Started Vue-3 - server-back/.gitignore
diff --git a/Getting Started Vue-3/README.md → ...ing Started Vue-3 - server-back/README.md b/Getting Started Vue-3/README.md → ...ing Started Vue-3 - server-back/README.md
diff --git a/Getting Started Vue-3/index.html → ...ng Started Vue-3 - server-back/index.html b/Getting Started Vue-3/index.html → ...ng Started Vue-3 - server-back/index.html
diff --git a/Getting Started Vue-3/package.json → ... Started Vue-3 - server-back/package.json b/Getting Started Vue-3/package.json → ... Started Vue-3 - server-back/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@syncfusion/ej2-vue-pdfviewer": "^21.2.8",
+    "@syncfusion/ej2-vue-pdfviewer": "*",
     "vue": "^3.2.47"
   },
   "devDependencies": {

diff --git a/Getting Started Vue-3 - server-back/src/App.vue b/Getting Started Vue-3 - server-back/src/App.vue
@@ -0,0 +1,45 @@
+<template>
+  <ejs-pdfviewer 
+    id="pdfViewer" 
+    :documentPath="documentPath"
+    :style="{ height: '800px', width: '1200px' }"
+    :serviceUrl="serviceUrl">
+  </ejs-pdfviewer>
+</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',
+    // Declaring component and its directives
+    components: {
+      "ejs-pdfviewer": PdfViewerComponent
+    },
+
+    data() {
+      return {
+        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
+        serviceUrl: "https://services.syncfusion.com/vue/production/api/pdfviewer"
+
+      };
+    },
+    provide: {
+      PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+                   Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields ]
+    }
+  }
+</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>
diff --git a/Getting Started Vue-3 - server-back/src/assets/vue.svg b/Getting Started Vue-3 - server-back/src/assets/vue.svg
diff --git a/Getting Started Vue-3/src/main.js → ...g Started Vue-3 - server-back/src/main.js b/Getting Started Vue-3/src/main.js → ...g Started Vue-3 - server-back/src/main.js
diff --git a/Getting Started Vue-3 - server-back/src/style.css b/Getting Started Vue-3 - server-back/src/style.css
diff --git a/Getting Started Vue-3/vite.config.js → ...tarted Vue-3 - server-back/vite.config.js b/Getting Started Vue-3/vite.config.js → ...tarted Vue-3 - server-back/vite.config.js