Skip to content

Commit e8cfe26

Browse files
author
SasidharanKaruppiah
authored
Merge pull request #10 from SyncfusionExamples/857163-sampleUpdate
857163-sampleUpdate : GitHub samples for vue 3 standalone and server …
2 parents 8fab8b3 + 8f2251f commit e8cfe26

File tree

18 files changed

+165
-47
lines changed

18 files changed

+165
-47
lines changed

‎Getting Started Vue-3 - Standalone/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎Getting Started Vue-3 - Standalone/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Vue 3 + Vite
2+
3+
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.
4+
5+
## Recommended IDE Setup
6+
7+
- [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).

‎Getting Started Vue-3 - Standalone/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>vue 3 getting started</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎Getting Started Vue-3 - Standalone/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "vite-project",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-pdfviewer": "*",
13+
"vue": "^3.2.47"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^4.1.0",
17+
"vite": "^4.3.9"
18+
}
19+
}

Getting Started Vue-3/src/App.vue renamed to Getting Started Vue-3 - Standalone/src/App.vue

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,45 @@
1-
<template>
2-
<ejs-pdfviewer
3-
id="pdfViewer"
4-
:documentPath="documentPath"
5-
:style="{ height: '800px', width: '1200px' }"
6-
:resourceUrl="resourceUrl">
7-
</ejs-pdfviewer>
8-
</template>
9-
10-
<script>
11-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
12-
ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';
13-
14-
export default {
15-
name: 'App',
16-
// Declaring component and its directives
17-
components: {
18-
"ejs-pdfviewer": PdfViewerComponent
19-
},
20-
21-
data() {
22-
return {
23-
// 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
24-
// serviceUrl: "https://services.syncfusion.com/vue/production/api/pdfviewer",
25-
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
26-
resourceUrl: 'https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib'
27-
28-
};
29-
},
30-
provide: {
31-
PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
32-
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields ]
33-
}
34-
}
35-
</script>
36-
37-
<style>
38-
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
39-
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
40-
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
41-
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
42-
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
43-
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
44-
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
45-
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
46-
@import '../node_modules/@syncfusion/ej2-vue-pdfviewer/styles/material.css';
1+
<template>
2+
<ejs-pdfviewer
3+
id="pdfViewer"
4+
:documentPath="documentPath"
5+
:style="{ height: '800px', width: '1200px' }"
6+
:resourceUrl="resourceUrl">
7+
</ejs-pdfviewer>
8+
</template>
9+
10+
<script>
11+
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
12+
ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';
13+
14+
export default {
15+
name: 'App',
16+
// Declaring component and its directives
17+
components: {
18+
"ejs-pdfviewer": PdfViewerComponent
19+
},
20+
21+
data() {
22+
return {
23+
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
24+
resourceUrl: 'https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib'
25+
26+
};
27+
},
28+
provide: {
29+
PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
30+
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields ]
31+
}
32+
}
33+
</script>
34+
35+
<style>
36+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
37+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
38+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
39+
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
40+
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
41+
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
42+
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
43+
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
44+
@import '../node_modules/@syncfusion/ej2-vue-pdfviewer/styles/material.css';
4745
</style>

Getting Started Vue-3/src/assets/vue.svg renamed to Getting Started Vue-3 - Standalone/src/assets/vue.svg

File renamed without changes.

‎Getting Started Vue-3 - Standalone/src/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

Getting Started Vue-3/src/style.css renamed to Getting Started Vue-3 - Standalone/src/style.css

File renamed without changes.

‎Getting Started Vue-3 - Standalone/vite.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

Getting Started Vue-3/.gitignore renamed to Getting Started Vue-3 - server-back/.gitignore

File renamed without changes.

0 commit comments

Comments
 (0)