📦 upgrade to vue3

Author: devmount

services/frontend/package-lock.json

@@ -11,10 +11,9 @@
  "axios": "^1.2.0",
  "bootstrap": "^5.1.0",
  "core-js": "^3.6.5",
- "vue": "^2.6.11",
- "vue-router": "^3.2.0",
- "vuex": "^3.6.2",
- "vuex-persistedstate": "^4.0.0"
+ "vue": "^3.2.45",
+ "vue-router": "^4.1.6",
+ "vuex": "^4.1.0"
  },
  "devDependencies": {
  "@babel/eslint-parser": "^7.19.1",
@@ -23,8 +22,7 @@
  "@vue/cli-plugin-router": "^5.0.8",
  "@vue/cli-service": "^5.0.8",
  "eslint": "^8.28.0",
- "eslint-plugin-vue": "^9.8.0",
- "vue-template-compiler": "^2.6.11"
+ "eslint-plugin-vue": "^9.8.0"
  },
  "eslintConfig": {
  "root": true,

services/frontend/package.json

@@ -8,13 +8,13 @@
 </template>
 
 <script>
-// @ is an alias to /src
-import NavBar from '@/components/NavBar.vue'
-export default {
+import { defineComponent } from 'vue';
+import NavBar from '@/components/NavBar.vue';
+export default defineComponent({
  components: {
  NavBar
  }
-}
+});
 </script>
 
 <style>

services/frontend/src/App.vue

@@ -5,9 +5,10 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import axios from 'axios';
 
-export default {
+export default defineComponent({
  name: 'Ping',
  data() {
  return {
@@ -28,5 +29,5 @@ export default {
  created() {
  this.getMessage();
  },
-};
+});
 </script>

services/frontend/src/components/HelloWorld.vue

@@ -39,7 +39,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
  name: 'NavBar',
  computed: {
  isLoggedIn: function() {
@@ -52,7 +54,7 @@ export default {
  this.$router.push('/login');
  }
  },
-}
+});
 </script>
 
 <style scoped>

services/frontend/src/components/NavBar.vue

@@ -1,17 +1,16 @@
 import 'bootstrap/dist/css/bootstrap.css';
+import { createApp } from "vue";
 import axios from 'axios';
-import Vue from 'vue';
 
 import App from './App.vue';
 import router from './router';
 import store from './store';
 
+const app = createApp(App);
 
 axios.defaults.withCredentials = true;
 axios.defaults.baseURL = 'http://localhost:5000/'; // the FastAPI backend
 
-Vue.config.productionTip = false;
-
 axios.interceptors.response.use(undefined, function (error) {
  if (error) {
  const originalRequest = error.config;
@@ -23,8 +22,6 @@ axios.interceptors.response.use(undefined, function (error) {
  }
 });
 
-new Vue({
- router,
- store,
- render: h => h(App)
-}).$mount('#app');
+app.use(router);
+app.use(store);
+app.mount("#app");

services/frontend/src/main.js

@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 
 import store from '@/store';
 
@@ -11,8 +10,6 @@ import Note from '@/views/Note';
 import Profile from '@/views/Profile';
 import Register from '@/views/Register';
 
-Vue.use(VueRouter);
-
 const routes = [
  {
  path: '/',
@@ -33,37 +30,36 @@ const routes = [
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
- meta: {requiresAuth: true},
+ meta: { requiresAuth: true },
  },
  {
  path: '/profile',
  name: 'Profile',
  component: Profile,
- meta: {requiresAuth: true},
+ meta: { requiresAuth: true },
  },
  {
  path: '/note/:id',
  name: 'Note',
  component: Note,
- meta: {requiresAuth: true},
+ meta: { requiresAuth: true },
  props: true,
  },
  {
  path: '/editnote/:id',
  name: 'EditNote',
  component: EditNote,
- meta: {requiresAuth: true},
+ meta: { requiresAuth: true },
  props: true,
  }
 ]
 
-const router = new VueRouter({
- mode: 'history',
- base: process.env.BASE_URL,
+const router = createRouter({
+ history: createWebHistory(process.env.BASE_URL),
  routes,
 });
 
-router.beforeEach((to, from, next) => {
+router.beforeEach((to, _, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
  if (store.getters.isAuthenticated) {
  next();

services/frontend/src/router/index.js

@@ -1,17 +1,11 @@
-import createPersistedState from "vuex-persistedstate";
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from "vuex";
 
 import notes from './modules/notes';
 import users from './modules/users';
 
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+export default createStore({
  modules: {
  notes,
  users,
- },
- plugins: [createPersistedState()]
+ }
 });

services/frontend/src/store/index.js

@@ -50,8 +50,9 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
-export default {
+export default defineComponent({
  name: 'Dashboard',
  data() {
  return {
@@ -73,5 +74,5 @@ export default {
  await this.createNote(this.form);
  },
  },
-};
+});
 </script>

services/frontend/src/views/Dashboard.vue

@@ -22,8 +22,9 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
-export default {
+export default defineComponent({
  name: 'EditNote',
  props: ['id'],
  data() {
@@ -65,5 +66,5 @@ export default {
  }
  }
  },
-};
+});
 </script>