Merge pull request #69 from unlayer/vue-v3

Upgrade to Vue v3

Author: adeelraza

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
+  presets: ['@vue/cli-plugin-babel/preset'],
+};

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-email-editor",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "main": "./dist/vue-email-editor.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -10,14 +10,18 @@
     "release": "npm run build-bundle && npm publish"
   },
   "dependencies": {
-    "vue": "^2.5.17"
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.5",
-    "@vue/cli-plugin-eslint": "^3.0.5",
-    "@vue/cli-service": "^3.0.5",
-    "vue-router": "^3.3.2",
-    "vue-template-compiler": "^2.5.17"
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-router": "^4.0.16"
   },
   "files": [
     "dist/*",
@@ -32,22 +36,18 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
-    "rules": {},
     "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not ie <= 8"
+    "not dead",
+    "not ie 11"
   ]
 }

package.json

@@ -1,8 +1,16 @@
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+
 import EmailEditor from './EmailEditor.vue';
 
 const Components = {
   EmailEditor,
 };
 
+const app = createApp({});
+
+Object.keys(Components).forEach((name) => {
+  app.component(name, Components[name]);
+});
+
 export { EmailEditor };
 export default Components;

src/components/index.js

@@ -1,26 +1,25 @@
-import Vue from 'vue/dist/vue.js'
-import VueRouter from 'vue-router'
+import { createApp } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router';
 
-import Example from './views/Example.vue'
-import DesignList from './views/DesignList.vue'
-import DesignEdit from './views/DesignEdit.vue'
-
-Vue.config.productionTip = false
+import Example from './views/Example.vue';
+import DesignList from './views/DesignList.vue';
+import DesignEdit from './views/DesignEdit.vue';
 
 const routes = [
   { path: '/', component: Example },
   { path: '/dashboard', component: DesignList },
   { path: '/dashboard/new', component: DesignEdit },
   { path: '/dashboard/edit/:designId', component: DesignEdit },
-]
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
 
-const router = new VueRouter({
-  mode: 'history',
-  routes
-})
+const app = createApp({});
 
-Vue.use(VueRouter)
+app.use(router);
+app.mount('#app');
 
-new Vue({
-  router
-}).$mount('#app')
+export default app;

src/main.js

@@ -18,7 +18,7 @@ import { EmailEditor } from '../components'
 import sample from '../data/sample.json';
 
 export default {
-  name: 'example',
+  name: 'exampleView',
   components: {
     EmailEditor
   },

src/views/Example.vue

@@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service');
+module.exports = defineConfig({
+  transpileDependencies: true,
+});