🐛 fix(vue-html-to-paper.js, index.js): change install function parame…

…ter from Vue to app The install function parameter has been changed from Vue to app to improve consistency with the naming conventions. This change ensures that the function is more descriptive and easier to understand. 🚀 chore(index.html): upgrade Vue.js to version 3 The Vue.js library has been upgraded to version 3, which provides better performance and new features. The script tag for Vue.js has been updated to use the unpkg.com CDN. The VueHtmlToPaper plugin is now imported using the ES6 module syntax. The Vue instance is now created using the createApp function instead of the Vue constructor. The print and printLandscape methods have been updated to use the this keyword instead of the vm variable. 🐛 fix(index.html): change method declarations to arrow functions The methods in the Vue component were declared using function expressions instead of arrow functions. This commit changes the method declarations to arrow functions to improve consistency and readability. 🔨 refactor(index.js): change Vue to app in install function The install function now uses app instead of Vue to improve consistency with the naming conventions. This change does not affect the functionality of the code.
mycurelabs · Jun 9, 2023 · 2941250 · 2941250
1 parent c314703
commit 2941250
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 25 deletions.
diff --git a/build/vue-html-to-paper.js b/build/vue-html-to-paper.js
@@ -25,8 +25,8 @@
   }
 
   const VueHtmlToPaper = {
-    install (Vue, options = {}) {
-      Vue.prototype.$htmlToPaper = (el, localOptions, cb = () => true) => {
+    install (app, options = {}) {
+      app.config.globalProperties.$htmlToPaper = (el, localOptions, cb = () => true) => {
         let defaultName = '_blank', 
           defaultSpecs = ['fullscreen=yes','titlebar=yes', 'scrollbars=yes'],
           defaultReplace = true,

diff --git a/dist/index.js b/dist/index.js
@@ -23,8 +23,8 @@ function openWindow (url, name, props) {
 }
 
 const VueHtmlToPaper = {
-  install (Vue, options = {}) {
-    Vue.prototype.$htmlToPaper = (el, localOptions, cb = () => true) => {
+  install (app, options = {}) {
+    app.config.globalProperties.$htmlToPaper = (el, localOptions, cb = () => true) => {
       let defaultName = '_blank', 
         defaultSpecs = ['fullscreen=yes','titlebar=yes', 'scrollbars=yes'],
         defaultReplace = true,

diff --git a/index.html b/index.html
@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   <script src="./build/vue-html-to-paper.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://unpkg.com/kidlat-css/css/kidlat.css">
   <title>Vue Html To Paper - Vue mixin for html elements printing.</title>
 </head>
+
 <body>
   <div id="app">
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@@ -103,6 +105,8 @@ <h4>Callback</h4>
     </div>
   </div>
   <script>
+    const { createApp } = Vue;
+
     const options = {
       name: '_blank',
       specs: [
@@ -116,11 +120,8 @@ <h4>Callback</h4>
       ],
     };
 
-    Vue.use(VueHtmlToPaper, options);
-
-    var vm = new Vue({
-      el: '#app',
-      data () {
+    const app = createApp({
+      data() {
         return {
           globalOptions: {
             name: '_blank',
@@ -147,49 +148,50 @@ <h4>Callback</h4>
         }
       },
       methods: {
-        async print () {
-          await vm.$htmlToPaper('printMe');
+        async print() {
+          await this.$htmlToPaper('printMe');
           console.warn('done');
         },
-        async printLandscape () {
+        async printLandscape() {
           const localOptions = {
             styles: [
               'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
               'https://unpkg.com/kidlat-css/css/kidlat.css',
               './landscape.css'
             ]
           };
-          await vm.$htmlToPaper('printMe', localOptions);
+          await this.$htmlToPaper('printMe', localOptions);
           console.warn('done landscape');
         },
-        async printNoStyles () {
+        async printNoStyles() {
           const localOptions = {
             styles: []
           };
-          await vm.$htmlToPaper('printMe', localOptions);
+          await this.$htmlToPaper('printMe', localOptions);
           console.warn('done no styles');
         },
-        async printAutoCloseOff () {
+        async printAutoCloseOff() {
           const localOptions = {
             autoClose: false,
           };
-          await vm.$htmlToPaper('printMe', localOptions);
+          await this.$htmlToPaper('printMe', localOptions);
           console.warn('done');
         },
-        async printCustomWindowTitle () {
+        async printCustomWindowTitle() {
           const localOptions = {
             windowTitle: 'This is custom window title',
           };
-          await vm.$htmlToPaper('printMe', localOptions);
+          await this.$htmlToPaper('printMe', localOptions);
           console.warn('done');
         },
-        printCallback () {
-          vm.$htmlToPaper('printMe', null, () => {
+        printCallback() {
+          this.$htmlToPaper('printMe', null, () => {
             console.warn('done callback');
           });
         },
       },
-    });
+    }).use(VueHtmlToPaper, options).mount('#app');
   </script>
 </body>
+
 </html>
diff --git a/src/index.js b/src/index.js
@@ -23,8 +23,8 @@ function openWindow (url, name, props) {
 }
 
 const VueHtmlToPaper = {
-  install (Vue, options = {}) {
-    Vue.prototype.$htmlToPaper = (el, localOptions, cb = () => true) => {
+  install (app, options = {}) {
+    app.config.globalProperties.$htmlToPaper = (el, localOptions, cb = () => true) => {
       let defaultName = '_blank', 
         defaultSpecs = ['fullscreen=yes','titlebar=yes', 'scrollbars=yes'],
         defaultReplace = true,