feat!: add Vue 3 support

BREAKING CHANGES: drop Vue 2 support

Author: romanmartushev

.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
   ],
   "extends": [
     "eslint:recommended",
-    "plugin:vue/recommended",
+    "plugin:vue/vue3-recommended",
     "plugin:import/errors",
     "plugin:import/warnings"
   ],
@@ -50,4 +50,4 @@ module.exports = {
       "warn"
     ]
   }
-};
+};

dev/App.vue

@@ -12,19 +12,19 @@
       :passiveThickness='passiveThickness'
     )
   .buttons
-    button(@click='currentStep--') < 
-    button(@click='currentStep++') > 
-    button(@click='activeColor = "purple" ') Set active color to purple 
-    button(@click='passiveColor = "pink" ') Set passive color to pink 
+    button(@click='currentStep--') &lt;
+    button(@click='currentStep++') >
+    button(@click='activeColor = "purple" ') Set active color to purple
+    button(@click='passiveColor = "pink" ') Set passive color to pink
     div(style='margin-top:10px')
-      label  Thickness:  
+      label  Thickness:
       input(type = 'text' v-model='lineThickness')
     div(style='margin-top:10px')
-      label  Active Step Thickness 
+      label  Active Step Thickness
       input(type = 'text' v-model='activeThickness')
     div(style='margin-top:10px')
-      label  Passive Step Thickness 
-      input(type = 'text' v-model='passiveThickness')   
+      label  Passive Step Thickness
+      input(type = 'text' v-model='passiveThickness')
 </template>
 
 <script>
@@ -61,4 +61,4 @@ body
   text-align: center
   button
     margin-left: 10px
-</style>
+</style>

dev/index.js

@@ -1,6 +1,6 @@
-import Vue from 'vue';
+import {createApp} from 'vue';
 
 import App from './App.vue';
 
-let app = new Vue(App);
-app.$mount('#app');
+let app = createApp(App);
+app.mount('#app');