[WIP] try to upgrade to vue3

web/.eslintrc.js

@@ -5,14 +5,16 @@ module.exports = {
   },
   extends: [
     'plugin:vue/recommended',
-    '@vue/airbnb',
+    // see https://github.com/vuejs/vue-cli/issues/1650
+    //  Unable to resolve path to module '@/components/hero/Illustration.vue'   import/no-unresolved
+    //'@vue/airbnb',
     'plugin:@intlify/vue-i18n/recommended',
   ],
   globals: {
     bus: false,
   },
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
@@ -23,6 +25,7 @@ module.exports = {
       extensions: ['.js', '.vue'],
     }],
     'no-multiple-empty-lines': 'off',
+    'vue/multi-word-component-names': 'off',
   },
   settings: {
     'vue-i18n': {

web/.gitignore

@@ -24,3 +24,6 @@ yarn-error.log*
 
 # Local Netlify folder
 .netlify
+
+# Compiled Lambda functions
+/lambda/

web/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

web/netlify.toml

@@ -1,4 +1,4 @@
 [build]
   command = "yarn build"
-  functions = "dist-lambda"
+  functions = "lambda"
   publish = "dist"

web/package.json

@@ -5,49 +5,62 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "yarn build:front && yarn build:lambda",
-    "build:front": "vue-cli-service build",
-    "build:lambda": "yarn run patch-package && yarn netlify-lambda build src/lambda --config ./webpack.functions.js",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
+    "build:front": "vue-cli-service build",
+    "build:lambda": "yarn run patch-package && yarn netlify-lambda build src/lambda --config ./webpack.functions.js",
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "@mdi/font": "^6.5.95",
-    "airtable": "0.11.2",
+    "@mdi/font": "5.9.55",
+    "@vue/compat": "^3.2.41",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
+    "airtable": "0.11.5",
     "axios": "^0.26.0",
-    "core-js": "^3.6.4",
-    "encoding": "^0.1.13",
+    "core-js": "^3.8.3",
     "material-design-icons-iconfont": "^6.4.1",
+    "mitt": "^3.0.0",
     "netlify-lambda": "2.0.15",
-    "vue": "^2.6.14",
-    "vue-i18n": "^8.27.0",
-    "vue-router": "^3.5.3",
-    "vuelidate": "^0.7.7",
-    "vuetify": "^2.6.10"
+    "roboto-fontface": "*",
+    "vue": "^3.2.13",
+    "vue-i18n": "9",
+    "vue-router": "4",
+    "vuetify": "^3.0.0-beta.0",
+    "webfontloader": "^1.0.0"
   },
   "devDependencies": {
-    "@intlify/eslint-plugin-vue-i18n": "^0.5.0",
-    "@intlify/vue-i18n-loader": "^1.0.0",
-    "@vue/cli-plugin-babel": "^4.3.0",
-    "@vue/cli-plugin-eslint": "^4.3.0",
-    "@vue/cli-plugin-unit-mocha": "^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": "^10.1.0",
-    "chai": "^4.1.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.26.3",
-    "sass-loader": "^8.0.2",
-    "terser-webpack-plugin": "1.4.5",
-    "vue-cli-plugin-i18n": "~1.0.1",
+    "@babel/core": "^7.19.3",
+    "@babel/eslint-parser": "^7.19.1",
+    "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-airbnb": "^7.0.0",
+    "eslint": "^8.25.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "patch-package": "^6.4.7",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
     "vue-cli-plugin-netlify-lambda": "~0.1.1",
-    "vue-cli-plugin-vuetify": "^2.0.5",
-    "vue-template-compiler": "^2.6.14",
-    "vuetify-loader": "^1.7.3",
+    "vue-cli-plugin-vuetify": "~2.5.8",
+    "vue-eslint-parser": "^9.1.0",
     "webpack-node-externals": "^3.0.0",
-    "patch-package": "^6.4.7"
+    "webpack-plugin-vuetify": "^2.0.0-alpha.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
   }
 }

web/src/App.vue

@@ -5,7 +5,6 @@
       @click-menu="clickMenu"
     />
     <sidebar
-      v-if="$vuetify.breakpoint.smAndDown"
       :show="showSidebar"
       :items="navigation"
       @close-drawer="showSidebar = false"

web/src/components/AppFooter.vue

@@ -16,7 +16,7 @@
           md="4"
           xs="12"
         >
-          <v-row :justify="$vuetify.breakpoint.mdAndUp ? 'left' : 'center'">
+          <v-row justify="center">
             <h3>
               {{ $t('footer.title') }}
             </h3>
@@ -43,7 +43,7 @@
           xs="12"
         >
           <v-row justify="center">
-            <v-spacer v-if="$vuetify.breakpoint.mdAndUp" />
+            <v-spacer />
             <social-button
               dark
               x-large

web/src/components/LocaleSwitcher.vue

@@ -1,11 +1,10 @@
 <template>
   <v-btn
-    text
     @click="changeLocale"
   >
     <!--eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
     <v-icon left>
-      language
+      mdi-web
     </v-icon>
     {{ switchLabel }}
   </v-btn>

web/src/components/Search.vue

@@ -8,10 +8,10 @@
         <v-autocomplete
           :label="$t('findSpeaker.topics')"
           :placeholder="$t('findSpeaker.searchPlaceholder')"
-          prepend-icon="search"
+          prepend-icon="mdi-search"
           clearable
           :items="topicItems"
-          @change="selectItem('topic', $event)"
+          @select="selectItem('topic', value)"
         />
       </v-col>
       <v-col
@@ -21,7 +21,7 @@
         <v-autocomplete
           :label="$t('findSpeaker.places')"
           :placeholder="$t('findSpeaker.searchPlaceholder')"
-          prepend-icon="search"
+          prepend-icon="mdi-search"
           clearable
           :items="locationItems"
           @change="selectItem('location', $event)"
@@ -45,11 +45,14 @@ export default {
   },
   methods: {
     selectItem(fieldName, value) {
+      debugger;
       this[fieldName] = value || '';
       this.emitValues();
+      console.log(value);
     },
     emitValues() {
-      bus.$emit('search-by-params', {
+      console.log(this.topic);
+      this.emitter.emit('search-by-params', {
         topic: this.topic,
         location: this.location,
       });

web/src/components/Sidebar.vue

@@ -1,9 +1,8 @@
 <template>
   <v-navigation-drawer
-    v-model="drawer"
-    app
-    right
-    dark
+    :model-value="drawer"
+    location="right"
+    temporary
     color="primary"
   >
     <v-list>
@@ -13,16 +12,10 @@
       >
         <v-list-item
           :href="item.path"
+          :title="item.title"
+          :prepend-icon="item.icon"
           link
-        >
-          <v-list-item-icon>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-icon>
-
-          <v-list-item-content>
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
+        />
       </div>
       <v-list-item>
         <locale-switcher />

web/src/components/Toolbar.vue

@@ -2,33 +2,36 @@
   <v-app-bar
     app
     color="primary"
-    dark
-    src="../assets/background.svg"
-    flat
     absolute
+    flat
   >
+    <template #image>
+      <v-img src="@/assets/background.svg" />
+    </template>
     <v-btn
       href="/"
-      text
+      :text="$t('hero.title')"
+      size="x-large"
+      variant="text"
     >
-      <v-toolbar-title>
+      <v-app-bar-title>
         {{ $t('hero.title') }}
-      </v-toolbar-title>
+      </v-app-bar-title>
     </v-btn>
 
     <v-spacer />
 
     <v-toolbar-items
-      v-if="$vuetify.breakpoint.mdAndUp"
       class="d-flex align-center"
     >
       <div
         v-for="item in filteredItems"
         :key="item.title"
       >
         <v-btn
-          text
+          :text="item.title"
           :href="item.path"
+          variant="text"
         >
           {{ item.title }}
         </v-btn>
@@ -40,15 +43,6 @@
       />
       <locale-switcher />
     </v-toolbar-items>
-    <v-toolbar-items v-else>
-      <v-btn
-        text
-        @click="$emit('click-menu')"
-      >
-        <!--eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        <v-icon>menu</v-icon>
-      </v-btn>
-    </v-toolbar-items>
   </v-app-bar>
 </template>
 

web/src/components/buttons/SocialButton.vue

@@ -1,11 +1,11 @@
 <template>
   <v-btn
     v-if="show"
+    variant="text"
     :href="link"
-    target="_blank"
     icon
-    :dark="dark"
-    :x-large="xLarge"
+    target="_blank"
+    size="x-large"
     color="primary"
   >
     <slot />

web/src/components/cards/TwoButtonModal.vue

@@ -2,9 +2,7 @@
   <v-card>
     <v-col>
       <v-card-title>{{ title }}</v-card-title>
-      <v-card-text px-8>
-        <slot />
-      </v-card-text>
+      <v-card-text px-8 />
       <v-card-actions>
         <v-spacer />
         <v-btn

web/src/components/hero/CallToAction.vue

@@ -21,7 +21,8 @@
         justify="center"
       >
         <v-btn
-          outlined
+          variant="outlined"
+          color="white"
           dark
           class="ma-2"
           @click="$vuetify.goTo('#find-speaker', options)"
@@ -34,7 +35,8 @@
         justify="center"
       >
         <v-btn
-          outlined
+          variant="outlined"
+          color="white"
           dark
           class="ma-4"
           href="nominate-speaker"
@@ -43,7 +45,6 @@
         </v-btn>
       </v-row>
       <v-row
-        v-if="$vuetify.breakpoint.mdAndUp"
         class="spacer"
       />
     </div>