Migrate to Vue3 using compat release

.eslintrc.js

@@ -4,12 +4,12 @@ module.exports = {
     node: true,
   },
   plugins: [
-    'vue-a11y',
+    'vuejs-accessibility',
   ],
   extends: [
     'plugin:vue/essential',
     '@vue/airbnb',
-    'plugin:vue-a11y/base',
+    'plugin:vuejs-accessibility/recommended',
   ],
   parserOptions: {
     parser: 'babel-eslint',
@@ -26,9 +26,11 @@ module.exports = {
     'dot-location': 'off',
     'comma-dangle': 'off',
     'keyword-spacing': 'off',
-    'vue-a11y/media-has-caption': 'off',
-    'vue-a11y/no-autofocus': 'off',
-    'vue-a11y/click-events-have-key-events': 'off',
+    'vuejs-accessibility/anchor-has-content': 'off',
+    'vuejs-accessibility/heading-has-content': 'off',
+    'vue/multi-word-component-names': 'off',
+    'vuejs-accessibility/no-autofocus': 'off',
+    'vuejs-accessibility/media-has-caption': 'off',
   },
   overrides: [
     {

package.json

@@ -17,36 +17,38 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vue/compat": "^3.2.24",
     "core-js": "^3.6.5",
-    "eslint-plugin-vue-a11y": "^0.0.31",
     "palava-client": "^2.2.1",
     "register-service-worker": "^1.7.1",
-    "vue": "^2.6.11",
-    "vue-i18n": "^8.17.0",
+    "vue": "^3.2.24",
+    "vue-i18n": "^9.0.0",
     "vue-inline-svg": "^1.3.1",
     "vue-meta": "^2.3.3",
-    "vue-router": "^3.1.6",
+    "vue-router": "^4.0.12",
     "yyid": "2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.3.0",
-    "@vue/cli-plugin-e2e-nightwatch": "~4.3.0",
-    "@vue/cli-plugin-eslint": "~4.3.0",
-    "@vue/cli-plugin-router": "~4.3.0",
-    "@vue/cli-plugin-unit-mocha": "~4.3.0",
-    "@vue/cli-plugin-vuex": "~4.3.0",
-    "@vue/cli-service": "~4.3.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/test-utils": "1.0.0-beta.31",
+    "@babel/eslint-parser": "^7.16.3",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-e2e-nightwatch": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-plugin-router": "~4.5.15",
+    "@vue/cli-plugin-unit-mocha": "~4.5.15",
+    "@vue/cli-plugin-vuex": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "@vue/compiler-sfc": "^3.2.24",
+    "@vue/eslint-config-airbnb": "^6.0.0",
+    "@vue/test-utils": "^1.3.0",
     "babel-eslint": "^10.1.0",
     "chai": "^4.1.2",
     "chromedriver": "88",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "geckodriver": "^1.19.1",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "eslint": "^7.0.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vuejs-accessibility": "^1.1.0",
+    "geckodriver": "^2.0.4",
+    "sass": "^1.44.0",
+    "sass-loader": "^10.0.0"
   }
 }

src/App.vue

@@ -25,7 +25,7 @@ export default {
   src: url('/fonts/WorkSans-Regular.woff2') format('woff2');
 }
 
-html, body {
+html, body, #app {
   margin: 0;
   padding: 0;
   height: 100%;

src/components/Navigation.vue

@@ -3,7 +3,10 @@
     <ul>
       <li v-for="infoPage in infoPages" :key="infoPage.id">
         <router-link :to="`/info/${infoPage.id}`">
-          <span @click="checkScreen(infoPage.id, $event)">{{ infoPage.title }}</span>
+          <span
+            @click="checkScreen(infoPage.id, $event)"
+            @keypress.enter="checkScreen(infoPage.id, $event)"
+          >{{ infoPage.title }}</span>
         </router-link>
       </li>
     </ul>

src/components/Party.vue

@@ -354,17 +354,17 @@ export default {
 .top-control {
   position: absolute;
   z-index: 1000;
-  top: $small-control-size / 3;
+  top: calc($small-control-size / 3);
   @media (min-width: $mobile) {
-    top: $large-control-size / 3;
+    top: calc($large-control-size / 3);
   }
   display: flex;
   align-items: center;
 
   .logo-control, .control {
-    margin-left: $small-control-size / 3;
+    margin-left: calc($small-control-size / 3);
     @media (min-width: $mobile) {
-      margin-left: $large-control-size / 3;
+      margin-left: calc($large-control-size / 3);
     }
   }
 
@@ -413,9 +413,9 @@ export default {
     }
 
     &--switch-language > * {
-      font-size: $small-control-size / 2.2;
+      font-size: calc($small-control-size / 2.2);
       @media (min-width: $mobile) {
-        font-size: $large-control-size / 2.2;
+        font-size: calc($large-control-size / 2.2);
       }
       transform: translate(-1px, 0px);
       text-transform: uppercase;

src/components/Peer.vue

@@ -436,13 +436,13 @@ export default {
   }
 
   &--in-lobby {
-    bottom: $small-control-size / 8;
-    right: $small-control-size / 8;
+    bottom: calc($small-control-size / 8);
+    right: calc($small-control-size / 8);
     .menu-control {
       height: $small-control-size;
       width: $small-control-size;
-      font-size: $small-control-size / 2;
-      margin: $small-control-size / 8;
+      font-size: calc($small-control-size / 2);
+      margin: calc($small-control-size / 8);
 
       & > * {
         padding: 2px;
@@ -451,21 +451,21 @@ export default {
   }
 
   &--on-stage {
-    bottom: $small-control-size / 8;
-    right: $small-control-size / 8;
+    bottom: calc($small-control-size / 8);
+    right: calc($small-control-size / 8);
     @media (min-width: $mobile) {
-      bottom: $large-control-size / 8;
-      right: $large-control-size / 8;
+      bottom: calc($large-control-size / 8);
+      right: calc($large-control-size / 8);
     }
 
     .menu-control {
       height: $small-control-size;
       width: $small-control-size;
-      margin: $small-control-size / 8;
+      margin: calc($small-control-size / 8);
       @media (min-width: $mobile) {
         height: $large-control-size;
         width: $large-control-size;
-        margin: $large-control-size / 8;
+        margin: calc($large-control-size / 8);
       }
     }
   }

src/components/PeerStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="peer-status" @click="$emit('click')">
+  <div class="peer-status" @click="$emit('click')" @keypress.enter="$emit('click')">
     <div v-if="status === 'audio'">
       <inline-svg
         class="symbol"

src/components/Placeholder.vue

@@ -8,6 +8,7 @@
       'background': background,
     }"
     @click="$emit('click')"
+    @keypress.enter="$emit('click')"
   />
 </template>
 

src/components/Stream.vue

@@ -10,6 +10,7 @@
       'media--orientation-unknown': this.status === 'video' && this.orientation === 'unknown',
     }"
     @click="$emit('click')"
+    @keypress.enter="$emit('click')"
   />
 </template>
 

src/css/styles.scss

@@ -192,9 +192,9 @@ $lobby-border-radius: 0px;
   position: absolute;
   height: $size;
   width: $size;
-  font-size: $size / 1.7;
-  top: $size / 4;
-  right: $size / 4;
+  font-size: calc($size / 1.7);
+  top: calc($size / 4);
+  right: calc($size / 4);
   fill: $action-1;
 }
 

src/main.js

@@ -1,5 +1,5 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 import VueMeta from 'vue-meta'
 import { InlineSvgPlugin } from 'vue-inline-svg'
 
@@ -10,24 +10,20 @@ import config from './config'
 import messages from './i18nStrings'
 import { detectLanguage } from './support'
 
-Vue.config.productionTip = false
-Vue.use(VueI18n)
-Vue.use(VueMeta, {
-  refreshOnceOnNavigation: true,
-})
-Vue.use(InlineSvgPlugin)
-
 const language = detectLanguage()
 const locale = language && language.startsWith('de') ? 'de' : config.defaultLocale
 
-const i18n = new VueI18n({
+const i18n = createI18n({
   locale,
   fallbackLocale: config.defaultLocale,
   messages,
 })
 
-new Vue({
-  router,
-  i18n,
-  render: (h) => h(App),
-}).$mount('#app')
+const app = createApp(App)
+app
+  .use(router)
+  .use(i18n)
+  .use(VueMeta, { refreshOnceOnNavigation: true, })
+  .use(InlineSvgPlugin)
+
+app.mount('#app')

src/router/index.js

@@ -1,5 +1,4 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 import Home from '@/views/Home.vue'
 import Room from '@/views/Room.vue'
@@ -11,8 +10,6 @@ import { escapeRegex } from '@/support'
 
 const validInfoPages = i18nStrings.en.infoPages.map((ip) => escapeRegex(ip.id))
 
-Vue.use(VueRouter)
-
 const routes = [
   {
     path: '/',
@@ -38,10 +35,9 @@ const routes = [
   },
 ];
 
-const router = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes,
-});
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
 
 export default router

src/views/Room.vue

@@ -6,7 +6,7 @@
 
     <transition name="fade">
       <InfoScreen
-        v-if="showInfoScreen"
+        v-if="infoScreenIsVisible"
         :page="infoPage"
         @close="closeInfoScreen"
         @open-info-screen="openInfoScreen"
@@ -25,9 +25,9 @@
 </template>
 
 <script>
+import { Session } from "palava-client"
 import config from "@/config"
 import logger from "@/logger"
-import { Session } from "palava-client"
 import { fancyNumber } from "@/support"
 
 import UserMediaConfigurator from "@/components/UserMediaConfigurator.vue"
@@ -84,8 +84,8 @@ export default {
     uiStateProps() {
       return this.uiState[1]
     },
-    showInfoScreen() {
-      return this.uiState[0] === Party && !!this.infoPage
+    infoScreenIsVisible() {
+      return !!this.infoPage
     }
   },
   methods: {

vue.config.js

@@ -2,5 +2,19 @@ module.exports = {
   chainWebpack: (config) => {
     config.resolve.symlinks(false) // see https://github.com/vuejs/vue-cli/issues/2948
     config.optimization.minimize(!process.env.BUILD_NOT_MINIFIED)
+
+    config.resolve.alias.set('vue', '@vue/compat')
+
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap((options) => ({
+        ...options,
+        compilerOptions: {
+          compatConfig: {
+            MODE: 2
+          }
+        }
+      }))
   }
 }