[broken] bumping vue/vuetify/vuex/...

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     node: true,
   },
   extends: [
-    "plugin:vue/essential",
+    "plugin:vue/base",
     "eslint:recommended",
     "plugin:prettier/recommended",
   ],

README.md

@@ -6,17 +6,17 @@ yarn install
 ```
 
 ### Compiles and hot-reloads for development
-```
+```bash
 yarn serve
 ```
 
 ### Compiles and minifies for production
-```
+```bash
 yarn build
 ```
 
 ### Lints and fixes files
-```
+```bash
 yarn lint
 ```
 

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --port 8081",
+    "serve": "vue-cli-service serve --port 8081 --skip-plugins @vue/cli-plugin-eslint",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
@@ -14,10 +14,10 @@
     "firebaseui": "^6.0.2",
     "gapi-script": "^1.2.0",
     "googleapis": "^134.0.0",
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.1",
-    "vuetify": "^2.6.15",
-    "vuex": "^3.6.2",
+    "vue": "^3",
+    "vue-router": "^4",
+    "vuetify": "^3",
+    "vuex": "^4",
     "vuex-easy-firestore": "^1.37.2"
   },
   "devDependencies": {

src/main.js

@@ -1,18 +1,23 @@
-import Vue from "vue";
-import Vuetify from "vuetify";
+import { createApp } from "vue";
+import { createVuetify } from "vuetify";
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import "vuetify/dist/vuetify.min.css";
+import "vuetify/styles";
 import "@mdi/font/css/materialdesignicons.css";
+import "./styles/global.css";
 
-Vue.use(Vuetify);
+const vuetify = createVuetify({
+  components,
+  directives,
+});
 
-Vue.config.productionTip = false;
+const app = createApp(App);
 
-new Vue({
-  router,
-  store,
-  vuetify: new Vuetify(),
-  render: (h) => h(App),
-}).$mount("#app");
+app.use(router);
+app.use(store);
+app.use(vuetify);
+
+app.mount("#app");

src/router/index.js

@@ -1,32 +1,34 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import HomeView from "../views/HomeView.vue";
-
-Vue.use(VueRouter);
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+import SheetView from '../views/SheetView.vue';
 
 const routes = [
   {
-    path: "/",
-    name: "home",
+    path: '/',
+    name: 'home',
     component: HomeView,
   },
   {
-    path: "/privacy",
-    name: "Privacy Policy",
-    component: () =>
-      import(/* webpackChunkName: "privacy" */ "../views/PrivacyView.vue"),
+    path: '/sheets',
+    name: 'sheets',
+    component: SheetView,
   },
   {
-    path: "/tos",
-    name: "Terms of Use",
+    path: '/privacy',
+    name: 'Privacy Policy',
     component: () =>
-      import(/* webpackChunkName: "tos" */ "../views/TOSView.vue"),
+      import(/* webpackChunkName: "privacy" */ '../views/PrivacyView.vue'),
+  },
+  {
+    path: '/tos',
+    name: 'Terms of Use',
+    component: () =>
+      import(/* webpackChunkName: "tos" */ '../views/TOSView.vue'),
   },
 ];
 
-const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
   routes,
 });
 

src/styles/global.css

@@ -0,0 +1,3 @@
+html {
+	overflow-y: auto;
+}