Vue 3 compatibility

example/components/infra/raw-displayer.vue

@@ -6,7 +6,6 @@
 </template>
 <script>
 const props = {
-  name: "raw-displayer",
   title: {
     required: true,
     type: String
@@ -16,6 +15,7 @@ const props = {
   }
 };
 export default {
+  name: "raw-displayer",
   props,
   computed: {
     valueString() {

example/components/nested/nested-store.js

@@ -1,8 +1,3 @@
-import Vuex from "vuex";
-import Vue from "vue";
-
-Vue.use(Vuex);
-
 export const nested = {
   namespaced: true,
   state: {

example/main.js

@@ -1,26 +1,23 @@
-import Vue from "vue";
+import { createApp } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+
 import App from "./App.vue";
-import VueRouter from "vue-router";
 import routes from "./route";
+
 import rawDisplayer from "./components/infra/raw-displayer.vue";
-import ElementUI from "element-ui";
 import store from "./store";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "font-awesome/css/font-awesome.css";
 
 require("bootstrap");
 
-const router = new VueRouter({
+const router = createRouter({
+  history: createWebHistory(),
   routes
 });
 
-Vue.config.productionTip = false;
-Vue.use(VueRouter);
-Vue.component("rawDisplayer", rawDisplayer);
-Vue.use(ElementUI);
-
-new Vue({
-  store,
-  router,
-  render: h => h(App)
-}).$mount("#app");
+createApp(App)
+  .use(router)
+  .use(store)
+  .component("rawDisplayer", rawDisplayer)
+  .mount("#app");

example/route.js

@@ -1,11 +1,11 @@
 const ctx = require.context("./components/", false, /\.vue$/);
 
 const routes = ctx.keys().map(key => ({
-  path: key
+  path: key.replace("./", "/")
 }));
 
 routes.push({
   path: "/",
-  redirect: "./simple"
+  redirect: "/simple"
 });
 export default routes;

example/store.js

@@ -1,10 +1,7 @@
 import { nested } from "./components/nested/nested-store";
-import Vuex from "vuex";
-import Vue from "vue";
+import { createStore } from "vuex";
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+export default createStore({
   namespaced: true,
   modules: {
     nested

package.json

@@ -34,12 +34,14 @@
     "sortablejs": "^1.10.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.4.0",
-    "@vue/cli-plugin-eslint": "^3.4.0",
-    "@vue/cli-plugin-unit-jest": "^3.4.0",
-    "@vue/cli-service": "^3.4.0",
+    "@vue/cli-plugin-babel": "^4.4.6",
+    "@vue/cli-plugin-eslint": "^4.4.6",
+    "@vue/cli-plugin-unit-jest": "^4.4.6",
+    "@vue/cli-service": "^4.4.6",
     "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/compiler-sfc": "^3.0.0-rc.4",
+    "@vue/compiler-dom": "^3.0.0-rc.4",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
@@ -51,13 +53,13 @@
     "eslint-plugin-vue": "^5.0.0",
     "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
-    "vue": "^2.6.8",
-    "vue-cli-plugin-component": "^1.10.5",
-    "vue-router": "^3.0.2",
-    "vue-server-renderer": "^2.6.8",
-    "vue-template-compiler": "^2.6.8",
-    "vuetify": "^1.5.16",
-    "vuex": "^3.1.1"
+    "vue": "^3.0.0-rc.4",
+    "vue-cli-plugin-component": "^1.12.2",
+    "vue-cli-plugin-vue-next": "~0.1.3",
+    "vue-router": "^4.0.0-beta.3",
+    "vue-server-renderer": "^2.6.11",
+    "vuetify": "^2.3.5",
+    "vuex": "^4.0.0-beta.4"
   },
   "eslintConfig": {
     "root": true,