Adding a store and setting up authentication

Install vuerouter:

(venv) [email protected]:~/emr/shorten/static/shorten/vueapp$ npm install [email protected] --save
...
+ [email protected]

Install vuex:

(venv) [email protected]:~/emr/shorten/static/shorten/vueapp$ npm install vuex --save
...
+ [email protected]

Install axios:

(venv) [email protected]:~/emr/shorten/static/shorten/vueapp$ npm install axios --save
...
+ [email protected]

Here’s a working implementation of using vue-router 4, vuex 4, and vue 3:

My main.js:

import { createApp } from "vue";
import App from "./App.vue";
import { createRouter, createWebHashHistory } from "vue-router";
import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 1,
    };
  },
});

import TestSmall from "./components/TestSmall.vue";

const Home = { template: "<div>Home</div>" };
const About = { template: "<div>About</div>" };

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
  { path: "/test", component: TestSmall },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes, // short for `routes: routes`
});

const app = createApp(App)
  .use(store)
  .use(router);

app.mount("#app");

Here,

Reference for installation of vuex (Vue Store): Docs