Upgrade to Vue 3, and upgrade other dependencies

.node-version

@@ -0,0 +1 @@
+20.10.0

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 12
+  - 20.10.0
 before_install:
   - npm install -g yarn
 git:

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": true,
   "eslint.validate": ["vue", "html", "javascript", "typescript"],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "typescript.tsdk": "node_modules/typescript/lib"
 }

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --modern",
+    "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
@@ -13,56 +13,70 @@
     "tests": "yarn test"
   },
   "dependencies": {
-    "core-js": "^3.4.3",
-    "register-service-worker": "^1.6.2",
-    "room-finder": "0.3.0",
-    "vue": "^2.6.10",
-    "vue-meta": "^2.3.1",
-    "vue-router": "^3.1.3",
-    "vue-slicksort": "^1.1.3",
-    "vue-snack": "^0.1.4",
-    "vuex": "^3.1.2"
+    "room-finder": "0.4.2",
+    "vue-slicksort": "^2.0.0-alpha.5",
+    "vue-snack-notify": "^0.0.7",
+    "core-js": "^3.8.3",
+    "register-service-worker": "^1.7.2",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.21",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.13",
-    "@vue/cli-plugin-e2e-cypress": "~4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.13",
-    "@vue/cli-plugin-pwa": "~4.5.13",
-    "@vue/cli-plugin-router": "~4.5.13",
-    "@vue/cli-plugin-typescript": "~4.5.13",
-    "@vue/cli-plugin-unit-jest": "~4.5.13",
-    "@vue/cli-plugin-vuex": "~4.5.13",
-    "@vue/cli-service": "~4.5.13",
-    "@vue/eslint-config-airbnb": "^5.0.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "@vue/test-utils": "^1.1.3",
-    "eslint": "^7.22.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^7.7.0",
-    "prettier": "^2.2.1",
-    "typescript": "~4.1.5",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.41.4"
+    "@types/jest": "^27.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-pwa": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "@vue/test-utils": "^2.0.0-0",
+    "@vue/vue3-jest": "^27.0.0-alpha.1",
+    "babel-jest": "^27.0.6",
+    "cypress": "^9.7.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "jest": "^27.0.5",
+    "prettier": "^2.4.1",
+    "ts-jest": "^27.0.4",
+    "typescript": "~4.5.5"
   },
   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
-      "@vue/airbnb",
-      "plugin:vue/recommended",
-      "@vue/prettier",
-      "@vue/typescript"
+      "plugin:vue/vue3-essential",
+      "eslint:recommended",
+      "@vue/typescript/recommended",
+      "plugin:prettier/recommended"
     ],
-    "parser": "vue-eslint-parser",
     "parserOptions": {
-      "parser": "@typescript-eslint/parser"
+      "ecmaVersion": 2020
+    },
+    "rules": {
+      "no-unused-expressions": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "import/prefer-default-export": "off",
+      "class-methods-use-this": "off",
+      "max-classes-per-file": "off",
+      "import/extensions": "off",
+      "import/no-unresolved": "off",
+      "vuejs-accessibility/click-events-have-key-events": "off",
+      "vue/html-button-has-type": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-non-null-assertion": "off"
     },
     "overrides": [
       {
@@ -74,24 +88,12 @@
           "jest": true
         }
       }
-    ],
-    "rules": {
-      "no-unused-expressions": "off",
-      "@typescript-eslint/no-unused-expressions": "warn",
-      "import/prefer-default-export": "off",
-      "class-methods-use-this": "off",
-      "max-classes-per-file": "off"
-    }
+    ]
   },
   "prettier": {
     "trailingComma": "es5"
   },
   "browserslist": [
-    "last 2 versions",
-    "firefox esr",
-    "not dead",
-    "> 0.5% in US",
-    "ie 10",
-    "cover 95% in US"
+    ">0.5% in US, >1%, last 2 versions, Firefox ESR, last 4 iOS major versions, cover 85% in US, not dead"
   ]
 }

public/index.html

@@ -5,7 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title>Walnut.Direct - Walnut Hills Directions</title>
 
     <!-- font -->
     <link

src/App.vue

@@ -3,11 +3,19 @@
     <header>
       <nav>
         <ul>
-          <router-link tag="li" to="/" exact>
-            <a> Home </a>
+          <router-link v-slot="{ navigate, href, isActive }" to="/" custom>
+            <li :class="isActive && 'router-link-active'">
+              <a :href="href" @click="navigate"> Home </a>
+            </li>
           </router-link>
-          <router-link tag="li" to="/myschedule">
-            <a> My Schedule </a>
+          <router-link
+            v-slot="{ navigate, href, isActive }"
+            to="/myschedule"
+            custom
+          >
+            <li :class="isActive && 'router-link-active'">
+              <a :href="href" @click="navigate"> My Schedule </a>
+            </li>
           </router-link>
           <li>
             <a
@@ -21,80 +29,95 @@
               >Floor Map</a
             >
           </li>
-          <router-link tag="li" to="/settings">
-            <a> Settings </a>
+          <router-link
+            v-slot="{ navigate, href, isActive }"
+            to="/settings"
+            custom
+          >
+            <li :class="isActive && 'router-link-active'">
+              <a :href="href" @click="navigate"> Settings </a>
+            </li>
           </router-link>
-          <router-link tag="li" to="/about">
-            <a> About </a>
+          <router-link v-slot="{ navigate, href, isActive }" to="/about" custom>
+            <li :class="isActive && 'router-link-active'">
+              <a :href="href" @click="navigate"> About </a>
+            </li>
           </router-link>
-          <router-link tag="li" to="/feedback">
-            <a> Feedback </a>
+          <router-link
+            v-slot="{ navigate, href, isActive }"
+            to="/feedback"
+            custom
+          >
+            <li :class="isActive && 'router-link-active'">
+              <a :href="href" @click="navigate"> Feedback </a>
+            </li>
           </router-link>
         </ul>
       </nav>
     </header>
 
-    <transition :name="transitionName">
-      <router-view id="main-stuff" class="child-view"></router-view>
-    </transition>
+    <router-view v-slot="{ Component }">
+      <transition :name="transitionName">
+        <component :is="Component" id="main-stuff" class="child-view" />
+      </transition>
+    </router-view>
 
     <TheRoomsDataList />
   </div>
+
+  <teleport to="head"> </teleport>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { defineComponent } from "vue";
 
 import TheRoomsDataList from "@/components/TheRoomsDataList.vue";
 import router from "@/router/index";
 
-export default Vue.extend({
+export default defineComponent({
   router,
   components: { TheRoomsDataList },
   data() {
     return {
-      transitionName: "fade",
+      transitionName: "",
     };
   },
   watch: {
-    $route(to, from) {
-      if (
-        "media" in window &&
-        window.matchMedia("(prefers-reduced-motion: reduce)").matches
-      ) {
-        this.transitionName = "fade";
-      } else if (from.path === "/" && to.path === "/directions") {
-        this.transitionName = "slide-left";
-      } else if (from.path === "/directions" && to.path === "/") {
-        this.transitionName = "slide-right";
-      } else {
-        this.transitionName = "fade";
-      }
+    $route: {
+      handler(to, from) {
+        if (from?.matched?.length === 0) {
+          // Don't do transition on initial render
+          this.transitionName = "";
+        } else if (
+          "media" in window &&
+          window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        ) {
+          this.transitionName = "fade";
+        } else if (from.path === "/" && to.path === "/directions") {
+          this.transitionName = "slide-left";
+        } else if (from.path === "/directions" && to.path === "/") {
+          this.transitionName = "slide-right";
+        } else {
+          this.transitionName = "fade";
+        }
+      },
+      deep: true,
     },
   },
-  mounted() {
+  async mounted() {
+    // TODO: very hacky. Wait 20 milliseconds before scrolling to the
+    // active link because for some reason, it isn't marked as active
+    // for a while.
+    await new Promise((resolve) => {
+      setTimeout(() => resolve, 20);
+    });
     const currentRouteNavItem = document.querySelector(
       "header li.router-link-active a"
     );
     if (currentRouteNavItem != null) {
       currentRouteNavItem.scrollIntoView({ inline: "center" });
     }
   },
-  metaInfo: {
-    // if no subcomponents specify a metaInfo.title, this title will be used
-    title: "Walnut Hills Directions",
-    // all titles will be injected into this template
-    titleTemplate: `Walnut.Direct - %s`,
-
-    meta: [
-      {
-        vmid: "description",
-        name: "description",
-        content:
-          "Straightforward directions between rooms in Walnut Hills High School. Created by the Walnut Hills Programming Club.",
-      },
-    ],
-  },
 });
 </script>
 
@@ -155,7 +178,7 @@ header li.router-link-active a {
   transition: opacity 0.5s ease;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-active {
   opacity: 0;
 }
@@ -168,13 +191,13 @@ header li.router-link-active a {
   /*padding: 1vw;*/
   transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
 }
-.slide-left-enter,
+.slide-left-enter-from,
 .slide-right-leave-active {
   opacity: 0;
   transform: translate(30px, 0);
 }
 .slide-left-leave-active,
-.slide-right-enter {
+.slide-right-enter-from {
   opacity: 0;
   transform: translate(-30px, 0);
 }

src/components/RoomInput.vue

@@ -5,20 +5,22 @@
     :name="name"
     placeholder="type or select"
     autocomplete="off"
-    :value="value"
+    :value="modelValue"
     list="roomsList"
-    @input="$emit('input', $event.target.value)"
+    @input="$emit('update:modelValue', $event.target.value)"
     @change="$emit('change', $event.target.value)"
   />
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { defineComponent } from "vue";
 
-export default Vue.extend({
+export default defineComponent({
   props: {
+    modelValue: { type: String, required: true },
     name: { type: String, required: true },
   },
+  emits: ["update:modelValue", "change"],
   data() {
     return { value: "" };
   },