Bash Commands
|
1 2 3 4 |
yarn add vue@next yarn add vuex@next yarn add vue-router@next yarn add -D @vue/compiler-sfc |
Changes in src/main.js
Additionally, change main.js from this:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') |
To this:
|
1 2 3 4 5 6 7 8 9 |
import {createApp} from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App) .use(router) .use(store) .mount('#app') |
Changes in src/router/index.js
After changes the code should be looking like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] const router = createRouter({ routes, history: createWebHistory, }) export default router |
Changes in src/store/index.js
This is how it should be looking:
|
1 2 3 4 5 6 7 8 |
import {createStore} from 'vuex' export default createStore({ state: {}, mutations: {}, actions: {}, modules: {} }) |