chore: migrate to Vue 3

- The version of Vue bumps to 3.1.4.
- The special version of Buefy that works on top of Vue 3 is installed.
- Other outdated modules are updated.
- In `src/index.js`,
    - App is mounted in a Vue 3 manner.
        - `createApp` instead of the global Vue instance.
        - Plugins are associated with an app.
- In `src/store/index.js`,
    - Store is created in a Vuex 4 manner.
        - The Vuex plugin is no longer registered to the global Vue
          instance.
        - `Vuex.createStore` instead of `new Vuex.Store`.
- In `src/storeuser.js`,
    - `state` is now a function that returns an object. Is this
      mandatory since Vuex 4?
    - Array element is directly replaced. This should be reactive on
      Vue 3.
- In `webpack.config.js`,
    - How to require a VueLoaderPlugin is changed. Since vue-loader
      v16?

issue #16

package.json

@@ -15,13 +15,14 @@
   "author": "Kikuo Emoto <kikuomax@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.13.16",
-    "@babel/preset-env": "^7.13.15",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
     "@mdi/font": "^5.9.55",
-    "@vue/test-utils": "^1.1.4",
+    "@vue/compiler-sfc": "^3.1.4",
+    "@vue/test-utils": "^2.0.0-rc.9",
     "babel-loader": "^8.2.2",
-    "buefy": "^0.9.6",
-    "bulma": "^0.9.2",
+    "buefy": "git+https://github.com/kikuomax/buefy.git",
+    "bulma": "^0.9.3",
     "chai": "^4.3.4",
     "copy-webpack-plugin": "^6.4.1",
     "core-js": "^2.6.12",
@@ -32,20 +33,19 @@
     "express": "^4.17.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.2",
-    "jsdom": "^16.5.3",
+    "jsdom": "^16.6.0",
     "jsdom-global": "^3.0.2",
     "maplibre-gl": "^1.14.0",
-    "mocha": "^8.3.2",
-    "mochapack": "^2.0.6",
-    "sass": "^1.32.11",
+    "mocha": "^8.4.0",
+    "mochapack": "^2.1.2",
+    "sass": "^1.35.1",
     "sass-loader": "^9.0.3",
     "sinon": "^9.2.4",
-    "sinon-chai": "^3.6.0",
+    "sinon-chai": "^3.7.0",
     "style-loader": "^1.3.0",
-    "vue": "^2.6.12",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.12",
-    "vuex": "^3.6.2",
+    "vue": "^3.1.4",
+    "vue-loader": "^16.3.0",
+    "vuex": "^4.0.2",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"
   },

src/components/business-statistics.vue

@@ -26,7 +26,7 @@
     <p>
       Out of <strong>{{businessRecords.length}}</strong> records
     </p>
-    </p>
+    <p>
       From <strong>{{startDateString}}</strong>
     </p>
     <p>

src/index.js

@@ -2,11 +2,9 @@
  * Entry point.
  */
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 import Buefy from 'buefy'
 
-Vue.use(Buefy)
-
 import '@mdi/font/css/materialdesignicons.min.css'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import '@scss'
@@ -27,7 +25,9 @@ store.dispatch('user/loadData')
     console.error('failed to load data', err)
   })
 
-new Vue({
-  render: h => h(App),
-  store
-}).$mount('#app')
+const app = createApp(App)
+
+app.use(Buefy)
+app.use(store)
+
+app.mount('#app')

src/store/index.js

@@ -6,11 +6,8 @@
  * @module store
  */
 
-import Vue from 'vue'
 import Vuex from 'vuex'
 
-Vue.use(Vuex)
-
 import createUserStore from './user'
 
 /**
@@ -30,7 +27,7 @@ import createUserStore from './user'
  */
 export function createStore (db) {
   const user = createUserStore(db)
-  return new Vuex.Store({
+  return Vuex.createStore({
     modules: {
       user: {
         ...user,

src/store/user.js

@@ -4,14 +4,12 @@
  * @module store/user
  */
 
-import Vue from 'vue'
-
 /**
  * Vuex State for user information.
  *
  * @namespace state
  */
-export const state = {
+export const state = () => ({
   /**
    * Whether data is loaded.
    *
@@ -58,7 +56,7 @@ export const state = {
    * @memberof module:store/user.state
    */
   businessRecords: []
-}
+})
 
 /**
  * Finds a dog associated with a given ID.
@@ -246,9 +244,7 @@ export const mutations = {
     if (index === -1) {
       throw new RangeError(`no such dog`, dog)
     }
-    // directly updating an array element disables reactivity.
-    // https://vuejs.org/v2/guide/reactivity.html#For-Arrays
-    Vue.set(dogs, index, dog)
+    dogs[index] = dog // reactive on Vue 3
   },
   /**
    * Replaces business records.

webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 
 const defaultMode = 'development'