From 8f2251f874957e5174ac06c1d522b37491de5349 Mon Sep 17 00:00:00 2001
From: SaravanaPriya31 <Saravana31>
Date: Thu, 30 Nov 2023 15:36:15 +0530
Subject: [PATCH] 857163-sampleUpdate : GitHub samples for vue 3 standalone and
 server back component is added

---
 Getting Started Vue-3 - Standalone/.gitignore | 24 +++++
 Getting Started Vue-3 - Standalone/README.md  |  7 ++
 Getting Started Vue-3 - Standalone/index.html | 13 +++
 .../package.json                              | 19 ++++
 .../src/App.vue                               | 90 +++++++++----------
 .../src/assets/vue.svg                        |  0
 .../src/main.js                               |  4 +
 .../src/style.css                             |  0
 .../vite.config.js                            |  7 ++
 .../.gitignore                                |  0
 .../README.md                                 |  0
 .../index.html                                |  0
 .../package.json                              |  2 +-
 .../src/App.vue                               | 45 ++++++++++
 .../src/assets/vue.svg                        |  1 +
 .../src/main.js                               |  0
 .../src/style.css                             |  0
 .../vite.config.js                            |  0
 18 files changed, 165 insertions(+), 47 deletions(-)
 create mode 100644 Getting Started Vue-3 - Standalone/.gitignore
 create mode 100644 Getting Started Vue-3 - Standalone/README.md
 create mode 100644 Getting Started Vue-3 - Standalone/index.html
 create mode 100644 Getting Started Vue-3 - Standalone/package.json
 rename {Getting Started Vue-3 => Getting Started Vue-3 - Standalone}/src/App.vue (84%)
 rename {Getting Started Vue-3 => Getting Started Vue-3 - Standalone}/src/assets/vue.svg (100%)
 create mode 100644 Getting Started Vue-3 - Standalone/src/main.js
 rename {Getting Started Vue-3 => Getting Started Vue-3 - Standalone}/src/style.css (100%)
 create mode 100644 Getting Started Vue-3 - Standalone/vite.config.js
 rename {Getting Started Vue-3 => Getting Started Vue-3 - server-back}/.gitignore (100%)
 rename {Getting Started Vue-3 => Getting Started Vue-3 - server-back}/README.md (100%)
 rename {Getting Started Vue-3 => Getting Started Vue-3 - server-back}/index.html (100%)
 rename {Getting Started Vue-3 => Getting Started Vue-3 - server-back}/package.json (86%)
 create mode 100644 Getting Started Vue-3 - server-back/src/App.vue
 create mode 100644 Getting Started Vue-3 - server-back/src/assets/vue.svg
 rename {Getting Started Vue-3 => Getting Started Vue-3 - server-back}/src/main.js (100%)
 create mode 100644 Getting Started Vue-3 - server-back/src/style.css
 rename {Getting Started Vue-3 => Getting Started Vue-3 - server-back}/vite.config.js (100%)

diff --git a/Getting Started Vue-3 - Standalone/.gitignore b/Getting Started Vue-3 - Standalone/.gitignore
new file mode 100644
index 0000000..4108b33
--- /dev/null
+++ 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
new file mode 100644
index 0000000..94c98a2
--- /dev/null
+++ 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
new file mode 100644
index 0000000..bc81ac1
--- /dev/null
+++ 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
new file mode 100644
index 0000000..4fa140a
--- /dev/null
+++ 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 b/Getting Started Vue-3 - Standalone/src/App.vue
similarity index 84%
rename from Getting Started Vue-3/src/App.vue
rename to Getting Started Vue-3 - Standalone/src/App.vue
index b157ef9..f196e40 100644
--- a/Getting Started Vue-3/src/App.vue	
+++ b/Getting 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>
\ No newline at end of file
diff --git a/Getting Started Vue-3/src/assets/vue.svg b/Getting Started Vue-3 - Standalone/src/assets/vue.svg
similarity index 100%
rename from Getting Started Vue-3/src/assets/vue.svg
rename to Getting Started 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
new file mode 100644
index 0000000..a4fc9b9
--- /dev/null
+++ 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 b/Getting Started Vue-3 - Standalone/src/style.css
similarity index 100%
rename from Getting Started Vue-3/src/style.css
rename to Getting 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
new file mode 100644
index 0000000..d83338b
--- /dev/null
+++ 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 b/Getting Started Vue-3 - server-back/.gitignore
similarity index 100%
rename from Getting Started Vue-3/.gitignore
rename to Getting Started Vue-3 - server-back/.gitignore
diff --git a/Getting Started Vue-3/README.md b/Getting Started Vue-3 - server-back/README.md
similarity index 100%
rename from Getting Started Vue-3/README.md
rename to Getting Started Vue-3 - server-back/README.md
diff --git a/Getting Started Vue-3/index.html b/Getting Started Vue-3 - server-back/index.html
similarity index 100%
rename from Getting Started Vue-3/index.html
rename to Getting Started Vue-3 - server-back/index.html
diff --git a/Getting Started Vue-3/package.json b/Getting Started Vue-3 - server-back/package.json
similarity index 86%
rename from Getting Started Vue-3/package.json
rename to Getting Started Vue-3 - server-back/package.json
index 6d2476e..65a4a23 100644
--- a/Getting Started Vue-3/package.json	
+++ b/Getting 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
new file mode 100644
index 0000000..01f6ace
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/Getting Started Vue-3 - server-back/src/assets/vue.svg b/Getting Started Vue-3 - server-back/src/assets/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/Getting Started Vue-3 - server-back/src/assets/vue.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/Getting Started Vue-3/src/main.js b/Getting Started Vue-3 - server-back/src/main.js
similarity index 100%
rename from Getting Started Vue-3/src/main.js
rename to Getting 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
new file mode 100644
index 0000000..e69de29
diff --git a/Getting Started Vue-3/vite.config.js b/Getting Started Vue-3 - server-back/vite.config.js
similarity index 100%
rename from Getting Started Vue-3/vite.config.js
rename to Getting Started Vue-3 - server-back/vite.config.js