├── .github
    └── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   ├── custom.md
    │   └── feature_request.md
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── _redirects
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── axe.jpg
    │   ├── logo.png
    │   └── style
    │   │   └── app.scss
    ├── components
    │   ├── ControlsContainer.vue
    │   ├── PdfContent.vue
    │   └── VueHtml2pdf.vue
    ├── main.js
    └── store
    │   └── index.js
└── vue.config.js


/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | This is a Demo Repo. of the package.
11 | Please create an issue here at the package's Repo. https://github.com/kempsteven/vue-html2pdf/issues, Thanks!
12 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/custom.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Custom issue template
 3 | about: Describe this issue template's purpose here.
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | This is a Demo Repo. of the package.
11 | Please create an issue here at the package's Repo. https://github.com/kempsteven/vue-html2pdf/issues, Thanks!
12 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | This is a Demo Repo. of the package.
11 | Please create an issue here at the package's Repo. https://github.com/kempsteven/vue-html2pdf/issues, Thanks!
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Note: If you are creating an Issue, Please create at the package's repository. This is the Packages Demo repository, Thanks!
 2 | https://github.com/kempsteven/vue-html2pdf/issues
 3 | 
 4 | # test-npm
 5 | 
 6 | ## Project setup
 7 | ```
 8 | npm install
 9 | ```
10 | 
11 | ### Compiles and hot-reloads for development
12 | ```
13 | npm run serve
14 | ```
15 | 
16 | ### Compiles and minifies for production
17 | ```
18 | npm run build
19 | ```
20 | 
21 | ### Run your tests
22 | ```
23 | npm run test
24 | ```
25 | 
26 | ### Lints and fixes files
27 | ```
28 | npm run lint
29 | ```
30 | 
31 | ### Customize configuration
32 | See [Configuration Reference](https://cli.vuejs.org/config/).
33 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-html2pdf-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "apexcharts": "^3.10.1",
11 |     "core-js": "^3.4.7",
12 |     "html2pdf.js": "^0.9.2",
13 |     "vue": "^2.6.10",
14 |     "vue-apexcharts": "^1.5.1",
15 |     "vue-html2pdf": "^1.8.0",
16 |     "vue-html2pdf-test": "^1.8.0",
17 |     "vuex": "^3.1.2",
18 |     "vuex-map-fields": "^1.3.6"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "^4.1.0",
22 |     "@vue/cli-service": "^4.1.0",
23 |     "node-sass": "^4.12.0",
24 |     "sass-loader": "^8.0.0",
25 |     "vue-template-compiler": "^2.6.10"
26 |   },
27 |   "browserslist": [
28 |     "> 1%",
29 |     "last 2 versions"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | # Netlify settings for single-page application
2 | /*    /index.html   200


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kempsteven/vue-html2pdf-demo/612cbb2d45baf0702e2a787962a20ca48e377605/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="favicon.ico">
 8 |     <title>Vue HTML2PDF</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but Vue HTML2PDF doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <vue-html2pdf
  4 |       :show-layout="controlValue.showLayout"
  5 |       :float-layout="controlValue.floatLayout"
  6 |       :enable-download="controlValue.enableDownload"
  7 |       :preview-modal="controlValue.previewModal"
  8 |       :filename="controlValue.filename"
  9 |       :paginate-elements-by-height="controlValue.paginateElementsByHeight"
 10 |       :pdf-quality="controlValue.pdfQuality"
 11 |       :pdf-format="controlValue.pdfFormat"
 12 |       :pdf-orientation="controlValue.pdfOrientation"
 13 |       :pdf-content-width="controlValue.pdfContentWidth"
 14 |       :manual-pagination="controlValue.manualPagination"
 15 |       :html-to-pdf-options="htmlToPdfOptions"
 16 |       @progress="onProgress($event)"
 17 |       @startPagination="startPagination()"
 18 |       @hasPaginated="hasPaginated()"
 19 |       @beforeDownload="beforeDownload($event)"
 20 |       @hasDownloaded="hasDownloaded($event)"
 21 |       ref="html2Pdf"
 22 |     >
 23 |       <pdf-content @domRendered="domRendered()" slot="pdf-content" />
 24 |     </vue-html2pdf>
 25 | 
 26 |     <section class="title-container">
 27 |       <h1 class="title-header">Vue HTML2PDF</h1>
 28 |     </section>
 29 | 
 30 |     <controls-container :progress="progress" @generateReport="downloadPdf()" />
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script>
 35 | import PdfContent from "@/components/PdfContent";
 36 | // import VueHtml2pdf from "@/components/VueHtml2pdf";
 37 | import ControlsContainer from "@/components/ControlsContainer";
 38 | import VueHtml2pdf from 'vue-html2pdf'
 39 | // import VueHtml2pdf from "vue-html2pdf-test";
 40 | import { mapFields } from "vuex-map-fields";
 41 | 
 42 | export default {
 43 |   name: "app",
 44 | 
 45 |   data() {
 46 |     return {
 47 |       contentRendered: false,
 48 |       progress: 0,
 49 |       generatingPdf: false,
 50 |       pdfDownloaded: false,
 51 |     };
 52 |   },
 53 | 
 54 |   computed: {
 55 |     ...mapFields(["controlValue"]),
 56 | 
 57 |     htmlToPdfOptions() {
 58 |       return {
 59 |         margin: 0,
 60 | 
 61 |         filename: "hee hee.pdf",
 62 | 
 63 |         image: {
 64 |           type: "jpeg",
 65 |           quality: 0.98,
 66 |         },
 67 | 
 68 |         enableLinks: true,
 69 | 
 70 |         html2canvas: {
 71 |           scale: this.controlValue.pdfQuality,
 72 |           useCORS: true,
 73 |         },
 74 | 
 75 |         jsPDF: {
 76 |           unit: "in",
 77 |           format: this.controlValue.pdfFormat,
 78 |           orientation: this.controlValue.pdfOrientation,
 79 |         },
 80 |       };
 81 |     },
 82 |   },
 83 | 
 84 |   methods: {
 85 |     async downloadPdf() {
 86 |       if (!(await this.validateControlValue())) return;
 87 | 
 88 |       this.$refs.html2Pdf.generatePdf();
 89 |     },
 90 | 
 91 |     validateControlValue() {
 92 |       if (this.controlValue.pdfQuality > 2) {
 93 |         alert("pdf-quality value should only be 0 - 2");
 94 |         this.controlValue.pdfQuality = 2;
 95 | 
 96 |         return false;
 97 |       }
 98 | 
 99 |       if (!this.controlValue.paginateElementsByHeight) {
100 |         alert("paginate-elements-by-height value cannot be empty");
101 |         this.controlValue.paginateElementsByHeight = 1400;
102 | 
103 |         return false;
104 |       }
105 | 
106 |       const paperSizes = [
107 |         "a0",
108 |         "a1",
109 |         "a2",
110 |         "a3",
111 |         "a4",
112 |         "letter",
113 |         "legal",
114 |         "a5",
115 |         "a6",
116 |         "a7",
117 |         "a8",
118 |         "a9",
119 |         "a10",
120 |       ];
121 | 
122 |       if (!paperSizes.includes(this.controlValue.pdfFormat)) {
123 |         alert(`pdf-format value should only be ${paperSizes}`);
124 |         this.controlValue.pdfFormat = "a4";
125 | 
126 |         return false;
127 |       }
128 | 
129 |       if (!this.controlValue.pdfOrientation) {
130 |         alert("pdf-orientation value cannot be empty");
131 |         this.controlValue.pdfOrientation = "portrait";
132 | 
133 |         return false;
134 |       }
135 | 
136 |       if (!this.controlValue.pdfContentWidth) {
137 |         alert("pdf-content-width value cannot be empty");
138 |         this.controlValue.pdfContentWidth = "800px";
139 | 
140 |         return false;
141 |       }
142 | 
143 |       return true;
144 |     },
145 | 
146 |     onProgress(progress) {
147 |       this.progress = progress;
148 |       console.log(`PDF generation progress: ${progress}%`)
149 |     },
150 | 
151 |     startPagination() {
152 |       console.log(`PDF has started pagination`)
153 |     },
154 | 
155 |     hasPaginated () {
156 |       console.log(`PDF has been paginated`)
157 |     },
158 | 
159 |     async beforeDownload ({ html2pdf, options, pdfContent }) {
160 |       console.log(`On Before PDF Generation`)
161 |       // await html2pdf().set(options).from(pdfContent).toPdf().get('pdf').then((pdf) => {
162 | 			// 	const totalPages = pdf.internal.getNumberOfPages()
163 | 			// 	for (let i = 1; i <= totalPages; i++) {
164 | 			// 		pdf.setPage(i)
165 | 			// 		pdf.setFontSize(10)
166 | 			// 		pdf.setTextColor(150)
167 | 			// 		pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() * 0.88), (pdf.internal.pageSize.getHeight() - 0.3))
168 | 			// 	} 
169 | 			// }).save()
170 |     },
171 | 
172 |     hasDownloaded (blobPdf) {
173 |       console.log(`PDF has downloaded yehey`)
174 |       this.pdfDownloaded = true
175 |       console.log(blobPdf)
176 |     },
177 | 
178 |     domRendered() {
179 |       console.log("Dom Has Rendered");
180 |       this.contentRendered = true;
181 |     },
182 | 
183 |     onBlobGenerate(blob) {
184 |       console.log(blob);
185 |     },
186 |   },
187 | 
188 |   components: {
189 |     VueHtml2pdf,
190 |     PdfContent,
191 |     ControlsContainer,
192 |   },
193 | };
194 | </script>
195 | 
196 | <style lang="scss">
197 | html,
198 | body {
199 |   width: 100%;
200 |   padding: 0;
201 |   margin: 0;
202 | }
203 | 
204 | #app {
205 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
206 |   -webkit-font-smoothing: antialiased;
207 |   -moz-osx-font-smoothing: grayscale;
208 |   text-align: center;
209 |   color: #2c3e50;
210 |   width: 100%;
211 |   height: 100%;
212 |   display: flex;
213 |   justify-content: center;
214 |   align-items: center;
215 |   background: #141e30; /* fallback for old browsers */
216 |   background: -webkit-linear-gradient(
217 |     to bottom,
218 |     #243b55,
219 |     #141e30
220 |   ); /* Chrome 10-25, Safari 5.1-6 */
221 |   background: linear-gradient(
222 |     to bottom,
223 |     #243b55,
224 |     #141e30
225 |   ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
226 |   flex-direction: column;
227 |   overflow: hidden;
228 | 
229 |   .title-container {
230 |     min-height: 100vh;
231 |     width: 100%;
232 |     display: flex;
233 |     justify-content: center;
234 |     align-items: center;
235 |     flex-shrink: 0;
236 |   }
237 | 
238 |   .title-header {
239 |     color: #fff;
240 |     padding: 25px 50px;
241 |     border: 5px solid #fff;
242 |     border-radius: 5px;
243 |     opacity: 0;
244 |     @include fadeintop(0.2s, 0);
245 |   }
246 | }
247 | </style>
248 | 


--------------------------------------------------------------------------------
/src/assets/axe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kempsteven/vue-html2pdf-demo/612cbb2d45baf0702e2a787962a20ca48e377605/src/assets/axe.jpg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kempsteven/vue-html2pdf-demo/612cbb2d45baf0702e2a787962a20ca48e377605/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/style/app.scss:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
 2 | @import url('https://fonts.googleapis.com/css?family=Lato:400,700');
 3 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
 4 | 
 5 | 
 6 | input, textarea {
 7 | 	&:required {
 8 |         box-shadow: none;
 9 |     }
10 |     &:invalid {
11 |         box-shadow: none;
12 |     }
13 | 
14 |     &:-webkit-autofill {
15 |         -webkit-box-shadow: 0 0 0 30px white inset !important;
16 |     }
17 | 
18 |     &::placeholder {
19 |         color: #bbbbbb;
20 | 	}
21 | 	
22 | 	&:focus {
23 | 		outline-style: none;
24 | 	}
25 | }
26 | 
27 | * {
28 |     margin: 0;
29 | 	padding: 0;
30 | 	box-sizing: border-box;
31 | 	font-family: 'Lato', sans-serif;
32 |     color: #4A4C50;
33 | 	word-break: break-word;
34 |     word-wrap: break-word;
35 |     text-align: left;
36 | 
37 |     &::-webkit-scrollbar-track { 
38 |         background: transparent;
39 |     }
40 | 
41 |     &::-webkit-scrollbar {  
42 |         width: 5px;
43 |         height: 5px;
44 |         background-color: #979CAC;
45 |         background: transparent;
46 |     }
47 | 
48 |     &::-webkit-scrollbar-thumb { 
49 |         border-radius: 10px;
50 |         background-color: #979CAC;
51 |     }
52 | }
53 | 
54 | @keyframes animate-fade-in-top{
55 |     from{
56 |         transform: translateY(-50px);
57 |         opacity: 0;
58 |     }
59 |     to{
60 |         transform: translateY(0px);
61 |         opacity: 1;
62 |     }
63 | }
64 | 
65 | @mixin fadeintop($duration, $delay){
66 |     animation-name: animate-fade-in-top;
67 |     animation-duration: $duration;
68 |     animation-delay: $delay;
69 |     animation-fill-mode: forwards;
70 |     animation-timing-function: ease-in-out;
71 | }


--------------------------------------------------------------------------------
/src/components/ControlsContainer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <section class="control-container">
  3 |         <h3 class="control-header">
  4 |             Component Props Controls
  5 |         </h3>
  6 | 
  7 |         <section class="item-container">
  8 |             <section
  9 |                 class="control-item"
 10 |                 v-for="(control, key) in controls"
 11 |                 :key="key"
 12 |             >
 13 |                 <section class="control">
 14 |                     <span class="item-label">
 15 |                         {{ control.label }}
 16 |                     </span>
 17 | 
 18 |                     <input
 19 |                         :class="
 20 |                             control.inputType === 'checkbox'
 21 |                                 ? 'input-checkbox'
 22 |                                 : 'input-box'
 23 |                         "
 24 |                         :type="control.inputType"
 25 |                         :value="controlValue[control.vModel]"
 26 |                         :checked="controlValue[control.vModel]"
 27 | 
 28 |                         @input="setInput(
 29 |                             $event,
 30 |                             control.vModel,
 31 |                             control.inputType
 32 |                         )"
 33 | 
 34 |                         @change="setInput(
 35 |                             $event,
 36 |                             control.vModel,
 37 |                             control.inputType
 38 |                         )"
 39 |                     >
 40 |                 </section>
 41 | 
 42 |                 <section class="options-container">
 43 |                     <section class="options-item">
 44 |                         <span class="options-title">
 45 |                             Type:
 46 |                         </span>
 47 | 
 48 |                         <span class="options-value">
 49 |                             {{ control.type }}
 50 |                         </span>
 51 |                     </section>
 52 | 
 53 |                     <section class="options-item">
 54 |                         <span class="options-title">
 55 |                             Options:
 56 |                         </span>
 57 | 
 58 |                         <span class="options-value">
 59 |                             {{ control.options }}
 60 |                         </span>
 61 |                     </section>
 62 |                 </section>
 63 | 
 64 |                 <section v-if="control.label === 'manual-pagination:'">
 65 |                     <b>Note:</b> <br>
 66 |                     When enabling this prop, the prop <br> <b> paginate-elements-by-height </b> will not be used.
 67 |                     Instead the pagination process will rely on the elements with a class "html2pdf__page-break"
 68 |                     to know where to page break.
 69 |                 </section>
 70 |             </section>
 71 | 
 72 |             <div>
 73 |                 <b>Note:</b> <br> There is a prop called <b>html-to-pdf-options</b>, if you set a value to
 74 |                 this prop, the props below will be overridden: <br><br>
 75 |                 <b>filename</b><br>
 76 |                 <b>pdf-quality</b><br>
 77 |                 <b>pdf-format</b><br>
 78 |                 <b>pdf-orientation</b>.<br><br>
 79 |                 Any value inputed to those props above will have no effect.
 80 |             </div>
 81 |         </section>
 82 | 
 83 |         <button
 84 |             :disabled="isGenerating"
 85 |             class="generate-btn"
 86 |             @click="$emit('generateReport')"
 87 |         >
 88 |             {{ isGenerating ? 'Loading...' : 'Generate PDF' }}
 89 |         </button>
 90 | 
 91 |         <section class="progress-container">
 92 |             <div class="progress-bar">
 93 |                 <div
 94 |                     class="progress"
 95 |                     :style="`width: ${progress}%;`"
 96 |                 />
 97 |             </div>
 98 | 
 99 |             <section class="generating-label" v-if="progress !== 0">
100 |                 <span class="label-title">
101 |                     {{ progress === 100 ? 'PDF Generated' : 'Generating PDF' }}
102 |                 </span>
103 | 
104 |                 <span class="label-progress">
105 |                     {{ `${ progress } %` }}
106 |                 </span>
107 |             </section>
108 |         </section>
109 |     </section>
110 | </template>
111 | 
112 | <script>
113 | import { mapFields } from 'vuex-map-fields'
114 | 
115 | export default {
116 |     props: {
117 |         progress: {
118 |             type: Number,
119 |             default: 0
120 |         }
121 |     },
122 | 
123 |     data () {
124 |         return {
125 |             controls: [
126 | 				{
127 | 					label: 'show-layout:',
128 | 					type: 'Boolean',
129 |                     options: 'true, false',
130 |                     inputType: 'checkbox',
131 |                     vModel: 'showLayout'
132 |                 },
133 | 
134 |                 {
135 | 					label: 'float-layout:',
136 | 					type: 'Boolean',
137 |                     options: 'true, false',
138 |                     inputType: 'checkbox',
139 |                     vModel: 'floatLayout'
140 |                 },
141 | 
142 |                 {
143 | 					label: 'enable-download:',
144 | 					type: 'Boolean',
145 |                     options: 'true, false',
146 |                     inputType: 'checkbox',
147 |                     vModel: 'enableDownload'
148 |                 },
149 | 
150 |                 {
151 | 					label: 'preview-modal:',
152 | 					type: 'Boolean',
153 |                     options: 'true, false',
154 |                     inputType: 'checkbox',
155 |                     vModel: 'previewModal'
156 |                 },
157 | 
158 |                 {
159 | 					label: 'manual-pagination:',
160 | 					type: 'Boolean',
161 |                     options: 'true, false',
162 |                     inputType: 'checkbox',
163 |                     vModel: 'manualPagination'
164 |                 },
165 |                 
166 |                 {
167 | 					label: 'paginate-elements-by-height:',
168 | 					type: 'Number',
169 |                     options: 'Any Number',
170 |                     inputType: 'number',
171 |                     vModel: 'paginateElementsByHeight'
172 |                 },
173 |                 
174 |                 {
175 | 					label: 'filename:',
176 | 					type: 'String',
177 |                     options: 'Any String',
178 |                     inputType: 'text',
179 |                     vModel: 'filename'
180 |                 },
181 |                 
182 |                 {
183 | 					label: 'pdf-quality:',
184 | 					type: 'Number',
185 |                     options: '0 - 2 (Can Have Decimal)',
186 |                     inputType: 'number',
187 |                     vModel: 'pdfQuality'
188 |                 },
189 | 
190 |                 {
191 | 					label: 'pdf-format:',
192 | 					type: 'String',
193 |                     options: 'a0, a1, a2, a3, a4, letter, legal, a5, a6, a7, a8, a9, a10',
194 |                     inputType: 'text',
195 |                     vModel: 'pdfFormat'
196 |                 },
197 |                 
198 |                 {
199 | 					label: 'pdf-orientation:',
200 | 					type: 'String',
201 |                     options: 'portrait, landscape',
202 |                     inputType: 'text',
203 |                     vModel: 'pdfOrientation'
204 |                 },
205 |                 
206 |                 {
207 | 					label: 'pdf-content-width:',
208 | 					type: 'String',
209 |                     options: 'Any css sizes (e.g. "800px", "65vw", "70%")',
210 |                     inputType: 'text',
211 |                     vModel: 'pdfContentWidth'
212 | 				},
213 |             ],
214 |         }
215 |     },
216 | 
217 |     computed: {
218 |         ...mapFields([
219 |             'controlValue'
220 |         ]),
221 | 
222 |         isGenerating () {
223 |             return this.progress !== 0 && this.progress !== 100
224 |         }
225 |     },
226 | 
227 |     methods: {
228 |         setInput (e, key, inputType) {
229 |             let value = e.target.value
230 | 
231 |             if (inputType === 'checkbox') {
232 |                 value = e.target.checked
233 |             }
234 | 
235 |             if (inputType === 'number') {
236 |                 value = e.target.value
237 |                             ? parseFloat(e.target.value)
238 |                             : 0
239 |             }
240 | 
241 |             this.$set(this.controlValue, key, value)
242 |         }
243 |     },
244 | }
245 | </script>
246 | 
247 | <style lang="scss" scoped>
248 | .control-container {
249 |     position: fixed;
250 |     z-index: 999999;
251 |     padding: 15px;
252 |     display: flex;
253 |     flex-direction: column;
254 |     background: #fff;
255 |     border-radius: 5px;
256 |     right: 25px;
257 |     top: 25px;
258 |     width: 405px;
259 |     box-shadow: 5px 5px 10px #000000;
260 |     opacity: 0;
261 |     max-height: calc(100vh - 50px);
262 |     @include fadeintop(0.3s, 0.2s);
263 | 
264 |     .control-header {
265 |         margin-bottom: 15px;
266 |         padding-bottom: 5px;
267 |         border-bottom: 1px solid #ccc;
268 |     }
269 | 
270 |     .item-container {
271 |         flex: 1 1 auto;
272 |         overflow: auto;
273 |         margin-bottom: 10px;
274 | 
275 |         .control-item {
276 |             display: flex;
277 |             align-items: center;
278 |             flex-wrap: wrap;
279 |             padding: 10px;
280 |             border: 1px solid #ccc;
281 |             border-radius: 5px;
282 | 
283 |             &:not(:last-child) {
284 |                 margin-bottom: 10px;
285 |             }
286 | 
287 |             .control {
288 |                 display: flex;
289 |                 align-items: center;
290 |                 margin-bottom: 10px;
291 |                 padding-bottom: 5px;
292 |                 border-bottom: 1px solid #ccc;
293 |                 width: 100%;
294 | 
295 |                 .item-label  {
296 |                     margin-right: 15px;
297 |                     display: block;
298 |                     padding-bottom: 3px;
299 |                     font-weight: 600;
300 |                     flex-shrink: 0;
301 |                 }
302 | 
303 |                 .input-checkbox {
304 |                     width: 20px;
305 |                     height: 20px;
306 |                     cursor: pointer;
307 |                 }
308 | 
309 |                 .input-box {
310 |                     flex: 1 1 auto;
311 |                     padding: 5px;
312 |                     border-radius: 3px;
313 |                     border: 1px solid #bbb;
314 |                     width: 0;
315 |                 }
316 |             }
317 | 
318 |             .options-container {
319 |                 width: 100%;
320 |                 flex-shrink: 0;
321 |                 display: flex;
322 |                 flex-direction: column;
323 | 
324 |                 .options-item {
325 |                     &:not(:last-child) {
326 |                         margin-bottom: 5px;
327 |                     }
328 | 
329 |                     .options-title {
330 |                         margin-right: 10px;
331 |                         font-weight: 600;
332 |                     }
333 | 
334 |                     .options-value {
335 |                         color: #3574b3;
336 |                     }
337 |                 }
338 |             }
339 |         }
340 |     }
341 | 
342 |     .generate-btn {
343 |         border: 0;
344 |         padding: 15px 25px;
345 |         border-radius: 5px;
346 |         color: #fff;
347 |         background: #243B55;
348 |         transition: 0.3s;
349 |         text-align: center;
350 |         cursor: pointer;
351 | 
352 |         &:disabled {
353 |             opacity: 0.5;
354 |         }
355 |     }
356 | 
357 |     .progress-container {
358 |         width: 100%;
359 |         margin-top: 10px;
360 | 
361 |         .progress-bar {
362 |             width: 100%;
363 |             height: 10px;
364 |             border: 1px solid #585858;
365 |             border-radius: 5px;
366 |             margin-bottom: 5px;
367 | 
368 |             .progress {
369 |                 width: 0%;
370 |                 height: 100%;
371 |                 transition: 0.3s;
372 |                 background: #2c3e50;
373 |             }
374 |         }
375 | 
376 |         .generating-label {
377 |             width: 100%;
378 |             display: flex;
379 |             justify-content: space-between;
380 |         }
381 |     }
382 | }
383 | </style>


--------------------------------------------------------------------------------
/src/components/PdfContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="pdf-content">
  3 |     <section class="report-info">
  4 |       <section class="image-container">
  5 |         <img
  6 |           class="user-image"
  7 |           src="https://i.imgur.com/wKblc.jpg"
  8 |           alt="User Image"
  9 |           ref="userImage"
 10 |         />
 11 |       </section>
 12 | 
 13 |       <section class="user-details">
 14 |         <h4 class="user-name">Mogul Khan Touch This</h4>
 15 | 
 16 |         <span class="detail-container">
 17 |           <span class="detail-label">Game:</span>
 18 |           Game No. 3
 19 |         </span>
 20 | 
 21 |         <span class="detail-container">
 22 |           <span class="detail-label">Date and Time</span>
 23 |           November 11, 2019 1:00 PM - 2:23 PM
 24 |         </span>
 25 | 
 26 |         <span class="detail-container">
 27 |           <span class="detail-label">Game Replay Link:</span>
 28 | 
 29 |           <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">https://www.youtube.com/watch?v=dQw4w9WgXcQ</a>
 30 |         </span>
 31 |       </section>
 32 |     </section>
 33 | 
 34 |     <section class="chart-container" v-for="(val, key) in 10" :key="key">
 35 |       <h4 class="time">November 11, 2019 1:00 PM - 2:23 PM</h4>
 36 | 
 37 |       <apexchart type="area" height="100%" width="100%" :options="chartOptions" :series="series" />
 38 |     </section>
 39 |   </section>
 40 | </template>
 41 | 
 42 | <script>
 43 | export default {
 44 |   data() {
 45 |     return {
 46 |       series: [
 47 |         {
 48 |           name: "Level",
 49 |           data: [
 50 |             { y: 1, x: "11/11/2019 13:00:00" },
 51 |             { y: 1, x: "11/11/2019 13:01:00" },
 52 |             { y: 2, x: "11/11/2019 13:02:00" },
 53 |             { y: 4, x: "11/11/2019 13:03:00" },
 54 |             { y: 5, x: "11/11/2019 14:04:00" },
 55 |           ],
 56 |         },
 57 |         {
 58 |           name: "Experience",
 59 |           data: [
 60 |             { y: 5, x: "11/11/2019 13:00:00" },
 61 |             { y: 5, x: "11/11/2019 13:01:00" },
 62 |             { y: 10, x: "11/11/2019 13:02:00" },
 63 |             { y: 12, x: "11/11/2019 13:03:00" },
 64 |             { y: 20, x: "11/11/2019 14:04:00" },
 65 |           ],
 66 |         },
 67 |         {
 68 |           name: "Gold",
 69 |           data: [
 70 |             { y: 10, x: "11/11/2019 13:00:00" },
 71 |             { y: 10, x: "11/11/2019 13:01:00" },
 72 |             { y: 20, x: "11/11/2019 13:02:00" },
 73 |             { y: 30, x: "11/11/2019 13:03:00" },
 74 |             { y: 50, x: "11/11/2019 14:04:00" },
 75 |           ],
 76 |         },
 77 |       ],
 78 | 
 79 |       chartOptions: {
 80 |         dataLabels: {
 81 |           enabled: false,
 82 | 
 83 |           style: {
 84 |             colors: ["#fff"],
 85 |           },
 86 |         },
 87 | 
 88 |         stroke: {
 89 |           curve: "smooth",
 90 |         },
 91 | 
 92 |         chart: {
 93 |           toolbar: {
 94 |             show: false,
 95 | 
 96 |             tools: {
 97 |               download: false,
 98 |             },
 99 |           },
100 | 
101 |           animations: {
102 |             enabled: false,
103 | 
104 |             animateGradually: {
105 |               enabled: false,
106 |             },
107 | 
108 |             dynamicAnimation: {
109 |               enabled: false,
110 |             },
111 |           },
112 |         },
113 | 
114 |         tooltip: {
115 |           enabled: true,
116 |           // theme: true,
117 |           x: {
118 |             show: true,
119 |             format: "MMM dd, yyyy HH:mm",
120 |           },
121 |         },
122 | 
123 |         legend: {
124 |           show: true,
125 |           labels: {
126 |             useSeriesColors: false,
127 |           },
128 |           onItemClick: {
129 |             toggleDataSeries: false,
130 |           },
131 |           onItemHover: {
132 |             highlightDataSeries: true,
133 |           },
134 |         },
135 | 
136 |         xaxis: {
137 |           labels: {
138 |             style: {
139 |               // colors: '#fff',
140 |             },
141 |           },
142 | 
143 |           type: "datetime",
144 |         },
145 | 
146 |         yaxis: {
147 |           labels: {
148 |             style: {
149 |               // color: '#fff',
150 |             },
151 | 
152 |             formatter: (value) => {
153 |               return value;
154 |             },
155 |           },
156 | 
157 |           type: "text",
158 |         },
159 |       },
160 |     };
161 |   },
162 | 
163 |   mounted() {
164 |     this.$nextTick(() => {
165 |       setTimeout(() => {
166 |         this.$emit("domRendered");
167 |       }, 1000);
168 |     });
169 |   },
170 | };
171 | </script>
172 | 
173 | <style lang="scss" scoped>
174 | .pdf-content {
175 |   width: 100%;
176 |   background: #fff;
177 | 
178 |   .report-info {
179 |     display: flex;
180 |     padding: 20px;
181 |     padding-bottom: 0px;
182 | 
183 |     .image-container {
184 |       width: 75px;
185 |       height: 75px;
186 |       border-radius: 50%;
187 |       overflow: hidden;
188 |       position: relative;
189 |       margin-right: 25px;
190 |       border: 1px solid #dadada;
191 | 
192 |       .user-image {
193 |         height: 100%;
194 |         min-width: 100%;
195 |         margin-left: 50%;
196 |         transform: translateX(-50%);
197 |       }
198 |     }
199 | 
200 |     .user-details {
201 |       display: flex;
202 |       flex-direction: column;
203 |       flex-shrink: 0;
204 | 
205 |       .user-name {
206 |         margin-bottom: 10px;
207 |         flex-shrink: 0;
208 |       }
209 | 
210 |       .detail-container {
211 |         font-size: 13px;
212 |         flex-shrink: 0;
213 | 
214 |         &:not(:last-child) {
215 |           margin-bottom: 10px;
216 |         }
217 | 
218 |         .detail-label {
219 |           font-weight: 600;
220 |           margin-right: 5px;
221 |           font-size: 13px;
222 |         }
223 |       }
224 |     }
225 |   }
226 | 
227 |   .chart-container {
228 |     width: 100%;
229 |     height: 320px;
230 |     padding: 20px;
231 |     pointer-events: none;
232 | 
233 |     &:not(:last-child) {
234 |       margin-bottom: 15px;
235 |     }
236 |   }
237 | }
238 | </style>


--------------------------------------------------------------------------------
/src/components/VueHtml2pdf.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="vue-html2pdf">
  3 | 		<section
  4 | 			class="layout-container"
  5 | 			:class="{
  6 | 				'show-layout' : showLayout,
  7 | 				'unset-all' : !floatLayout
  8 | 			}"
  9 | 		>
 10 | 			<section
 11 | 				class="content-wrapper"
 12 | 				:style="`width: ${pdfContentWidth};`"
 13 | 				ref="pdfContent"
 14 | 			>
 15 | 				<slot name="pdf-content"/>
 16 | 			</section>
 17 | 		</section>
 18 | 
 19 | 		<transition name="transition-anim">
 20 | 			<section class="pdf-preview" v-if="pdfFile">
 21 | 				<button @click.self="closePreview()">
 22 | 					&times;
 23 | 				</button>
 24 | 
 25 | 				<iframe
 26 | 					:src="pdfFile"
 27 | 					width="100%"
 28 | 					height="100%"
 29 | 				/>
 30 | 			</section>
 31 | 		</transition>
 32 |     </div>
 33 | </template>
 34 | <script>
 35 | import html2pdf from 'html2pdf.js'
 36 | 
 37 | export default {
 38 | 	props: {
 39 | 		showLayout: {
 40 | 			type: Boolean,
 41 | 			default: false
 42 | 		},
 43 | 
 44 | 		floatLayout: {
 45 | 			type: Boolean,
 46 | 			default: false
 47 | 		},
 48 | 
 49 | 		enableDownload: {
 50 | 			type: Boolean,
 51 | 			default: true
 52 | 		},
 53 | 
 54 | 		previewModal: {
 55 | 			type: Boolean,
 56 | 			default: false
 57 | 		},
 58 | 
 59 | 		paginateElementsByHeight: {
 60 | 			type: Number
 61 | 		},
 62 | 
 63 | 		filename: {
 64 | 			type: String,
 65 | 			default: `${new Date().getTime()}`
 66 | 		},
 67 | 
 68 | 		pdfQuality: {
 69 | 			type: Number,
 70 | 			default: 2,
 71 | 		},
 72 | 
 73 | 		pdfFormat: {
 74 | 			default: 'a4',
 75 | 		},
 76 | 
 77 | 		pdfOrientation: {
 78 | 			type: String,
 79 | 			default: 'portrait'
 80 | 		},
 81 | 
 82 | 		pdfContentWidth: {
 83 | 			default: '800px'
 84 | 		},
 85 | 
 86 | 		htmlToPdfOptions: {
 87 | 			type: Object
 88 | 		},
 89 | 
 90 | 		manualPagination: {
 91 | 			type: Boolean,
 92 | 			default: false
 93 | 		}
 94 | 	},
 95 | 
 96 | 	data () {
 97 | 		return {
 98 | 			hasAlreadyParsed: false,
 99 | 			progress: 0,
100 | 			pdfWindow: null,
101 | 			pdfFile: null
102 | 		}
103 | 	},
104 | 
105 | 	watch: {
106 | 		progress (val) {
107 | 			this.$emit('progress', val)
108 | 		},
109 | 
110 | 		paginateElementsByHeight () {
111 | 			this.resetPagination()
112 | 		},
113 | 
114 | 		$props: {
115 | 			handler () {
116 | 				this.validateProps()
117 | 			},
118 | 
119 | 			deep: true,
120 | 			immediate: true
121 | 		}
122 | 	},
123 | 
124 | 	methods: {
125 | 		validateProps () {
126 | 			// If manual-pagination is false, paginate-elements-by-height props is required
127 | 			if (!this.manualPagination) {
128 | 				if (this.paginateElementsByHeight === undefined) {
129 | 					console.error('Error: paginate-elements-by-height is required if manual-pagination is false')
130 | 				}
131 | 			}
132 | 		},
133 | 
134 | 		resetPagination () {
135 | 			const parentElement = this.$refs.pdfContent.firstChild
136 | 			const pageBreaks = parentElement.getElementsByClassName('html2pdf__page-break')
137 | 			const pageBreakLength = pageBreaks.length - 1
138 | 			
139 | 			if (pageBreakLength === -1) return
140 | 
141 | 			this.hasAlreadyParsed = false
142 | 
143 | 			// Remove All Page Break (For Pagination)
144 | 			for (let x = pageBreakLength; x >= 0; x--) {
145 | 				pageBreaks[x].parentNode.removeChild(pageBreaks[x])
146 | 			}
147 | 		},
148 | 
149 | 		generatePdf () {
150 | 			this.$emit('startPagination')
151 | 			this.progress = 0
152 | 			this.paginationOfElements()
153 | 		},
154 | 
155 | 		paginationOfElements () {
156 | 			this.progress = 25
157 | 
158 | 			/*
159 | 				When this props is true, 
160 | 				the props paginate-elements-by-height will not be used.
161 | 				Instead the pagination process will rely on the elements with a class "html2pdf__page-break"
162 | 				to know where to page break, which is automatically done by html2pdf.js
163 | 			*/
164 | 			if (this.manualPagination) {
165 | 				this.progress = 70
166 | 				this.downloadPdf()
167 | 				return
168 | 			}
169 | 
170 | 			if (!this.hasAlreadyParsed) {
171 | 				const parentElement = this.$refs.pdfContent.firstChild
172 | 				const ArrOfContentChildren = Array.from(parentElement.children)
173 | 				let childrenHeight = 0
174 | 
175 | 				/*
176 | 					Loop through Elements and add there height with childrenHeight variable.
177 | 					Once the childrenHeight is >= this.paginateElementsByHeight, create a div with
178 | 					a class named 'html2pdf__page-break' and insert the element before the element
179 | 					that will be in the next page
180 | 				*/
181 | 				for (const childElement of ArrOfContentChildren) {
182 | 					// Get The First Class of the element
183 | 					const elementFirstClass = childElement.classList[0]
184 | 					const isPageBreakClass = elementFirstClass === 'html2pdf__page-break'
185 | 					if (isPageBreakClass) {
186 | 						childrenHeight = 0
187 | 					} else {
188 | 						// Get Element Height
189 | 						const elementHeight = childElement.clientHeight
190 | 
191 | 						// Get Computed Margin Top and Bottom
192 | 						const elementComputedStyle = childElement.currentStyle || window.getComputedStyle(childElement)
193 | 						const elementMarginTopBottom = parseInt(elementComputedStyle.marginTop) + parseInt(elementComputedStyle.marginBottom)
194 | 
195 | 						// Add Both Element Height with the Elements Margin Top and Bottom
196 | 						const elementHeightWithMargin = elementHeight + elementMarginTopBottom
197 | 
198 | 						if ((childrenHeight + elementHeight) < this.paginateElementsByHeight) {
199 | 							childrenHeight += elementHeightWithMargin
200 | 						} else {
201 | 							const section = document.createElement('div')
202 | 							section.classList.add('html2pdf__page-break')
203 | 							parentElement.insertBefore(section, childElement)
204 | 
205 | 							// Reset Variables made the upper condition false
206 | 							childrenHeight = elementHeightWithMargin
207 | 						}
208 | 					}
209 | 				}
210 | 
211 | 				this.progress = 70
212 | 
213 | 				/*
214 | 					Set to true so that if would generate again we wouldn't need
215 | 					to parse the HTML to paginate the elements
216 | 				*/
217 | 				this.hasAlreadyParsed = true
218 | 			} else {
219 | 				this.progress = 70
220 | 			}
221 | 
222 | 			this.$emit('hasPaginated')
223 | 			this.downloadPdf()
224 | 		},
225 | 
226 | 		async downloadPdf () {
227 | 			// Set Element and Html2pdf.js Options
228 | 			const pdfContent = this.$refs.pdfContent
229 | 			let options = this.setOptions()
230 | 
231 | 			this.$emit('beforeDownload', { html2pdf, options, pdfContent })
232 | 
233 | 			const html2PdfSetup = html2pdf().set(options).from(pdfContent)
234 | 			let pdfBlobUrl = null
235 | 
236 | 			if (this.previewModal) {
237 | 				this.pdfFile = await html2PdfSetup.output('bloburl')
238 | 				pdfBlobUrl = this.pdfFile
239 | 			}
240 | 
241 | 			if (this.enableDownload) {
242 | 				pdfBlobUrl = await html2PdfSetup.save().output('bloburl')
243 | 			}
244 | 
245 | 			if (pdfBlobUrl) {
246 | 				const res = await fetch(pdfBlobUrl)
247 | 				const blobFile = await res.blob()
248 | 				this.$emit('hasDownloaded', blobFile)
249 | 			}
250 | 
251 | 			this.progress = 100
252 | 		},
253 | 
254 | 		setOptions () {
255 | 			if (this.htmlToPdfOptions !== undefined && this.htmlToPdfOptions !== null) {
256 | 				return this.htmlToPdfOptions
257 | 			}
258 | 
259 | 			return {
260 | 				margin: 0,
261 | 
262 | 				filename: `${this.filename}.pdf`,
263 | 
264 | 				image: {
265 | 					type: 'jpeg', 
266 | 					quality: 0.98
267 | 				},
268 | 
269 | 				enableLinks: false,
270 | 
271 | 				html2canvas: {
272 | 					scale: this.pdfQuality,
273 | 					useCORS: true
274 | 				},
275 | 
276 | 				jsPDF: {
277 | 					unit: 'in',
278 | 					format: this.pdfFormat,
279 | 					orientation: this.pdfOrientation
280 | 				}
281 | 			}
282 | 		},
283 | 
284 | 		closePreview () {
285 | 			this.pdfFile = null
286 | 		}
287 | 	}
288 | }
289 | </script>
290 | 
291 | <style lang="scss" scoped>
292 | .vue-html2pdf {
293 | 	.layout-container {
294 | 		position: fixed;
295 | 		width: 100vw;
296 | 		height: 100vh;
297 | 		left: -100vw;
298 | 		top: 0;
299 | 		z-index: -9999;
300 | 		background: rgba(95, 95, 95, 0.8);
301 | 		display: flex;
302 | 		justify-content: center;
303 | 		align-items: flex-start;
304 | 		overflow: auto;
305 | 
306 | 		&.show-layout {
307 | 			left: 0vw;
308 | 			z-index: 9999;
309 | 		}
310 | 
311 | 		&.unset-all {
312 | 			all: unset;
313 | 			width: auto;
314 | 			height: auto;
315 | 		}
316 | 	}
317 | 
318 | 	.pdf-preview {
319 | 		position: fixed;
320 | 		width: 65%;
321 | 		min-width: 600px;
322 | 		height: 80vh;
323 | 		top: 100px;
324 | 		z-index: 9999999;
325 | 		left: 50%;
326 | 		transform: translateX(-50%);
327 | 		border-radius: 5px;
328 | 		box-shadow: 0px 0px 10px #00000048;
329 | 
330 | 		button {
331 | 			position: absolute;
332 | 			top: -20px;
333 | 			left: -15px;
334 | 			width: 35px;
335 | 			height: 35px;
336 | 			background: #555;
337 | 			border: 0;
338 | 			box-shadow: 0px 0px 10px #00000048;
339 | 			border-radius: 50%;
340 | 			color: #fff;
341 | 			display: flex;
342 | 			align-items: center;
343 | 			justify-content: center;
344 | 			font-size: 20px;
345 | 			cursor: pointer;
346 | 		}
347 | 
348 | 		iframe {
349 | 			border: 0;
350 | 		}
351 | 	}
352 | 
353 | 	.transition-anim-enter-active, .transition-anim-leave-active {
354 | 		transition: opacity 0.3s ease-in;
355 | 	}
356 | 
357 | 	.transition-anim-enter, .transition-anim-leave-to{
358 | 		opacity: 0;
359 | 	}
360 | }
361 | </style>
362 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import VueApexCharts from 'vue-apexcharts'
 4 | import Vuex from 'vuex'
 5 | import store from './store'
 6 | 
 7 | Vue.use(Vuex)
 8 | 
 9 | Vue.use(VueApexCharts)
10 | 
11 | Vue.component('apexchart', VueApexCharts)
12 | 
13 | Vue.config.productionTip = false
14 | 
15 | new Vue({
16 |   store,
17 |   render: h => h(App),
18 | }).$mount('#app')
19 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | import { getField, updateField } from 'vuex-map-fields';
 4 | 
 5 | Vue.use(Vuex);
 6 | 
 7 | export default new Vuex.Store({
 8 |     state: {
 9 |         controlValue: {
10 |             showLayout: false,
11 |             floatLayout: true,
12 |             enableDownload: true,
13 |             previewModal: true,
14 |             paginateElementsByHeight: 1100,
15 |             manualPagination: false,
16 |             filename: 'Hee Hee',
17 |             pdfQuality: 2,
18 |             pdfFormat: 'a4',
19 |             pdfOrientation: 'portrait',
20 |             pdfContentWidth: '800px'
21 |         }
22 |     },
23 | 
24 |     mutations: {
25 |         updateField
26 |     },
27 | 
28 |     getters: {
29 |         getField
30 |     },
31 | })


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   css: {
 3 |     loaderOptions: {
 4 |       // pass options to sass-loader
 5 |       // @/ is an alias to src/
 6 |       // so this assumes you have a file named `src/variables.sass`
 7 |       // Note: this option is named as "data" in sass-loader v7
 8 |     //   sass: {
 9 |     //     prependData: `@import "~@/variables.sass"`
10 |     //   },
11 |       // by default the `sass` option will apply to both syntaxes
12 |       // because `scss` syntax is also processed by sass-loader underlyingly
13 |       // but when configuring the `data` option
14 |       // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
15 |       // in that case, we can target the `scss` syntax separately using the `scss` option
16 |       scss: {
17 |         prependData: `@import "~@/assets/style/app.scss";`
18 |       },
19 |       // pass Less.js Options to less-loader
20 |     //   less:{
21 |     //     // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
22 |     //     // `primary` is global variables fields name
23 |     //     globalVars: {
24 |     //       primary: '#fff'
25 |     //     }
26 |     //   }
27 |     }
28 |   }
29 | }


--------------------------------------------------------------------------------