Upgrade to Quasar 2

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@firebase/firestore": "^2.1.7",
-    "@quasar/extras": "^1.0.0",
+    "@quasar/extras": "^1.10.11",
     "@types/leaflet": "^1.7.0",
     "axios": "^0.21.1",
     "chart.js": "^2.9.4",
@@ -40,7 +40,7 @@
     "leaflet": "^1.7.1",
     "leaflet-gpx": "^1.5.2",
     "leaflet.markercluster": "^1.4.1",
-    "quasar": "^1.0.0",
+    "quasar": "2",
     "sitemap-webpack-plugin": "^1.1.0",
     "v-video-embed": "^1.0.8",
     "vue": "^2.6.12",
@@ -56,15 +56,13 @@
     "vue2-leaflet-gpx": "^2.0.0",
     "vue2-leaflet-markercluster": "^3.1.0",
     "vuelidate": "^0.7.6",
-    "vuex": "^3.6.0"
+    "vuex": "4"
   },
   "devDependencies": {
-    "@quasar/app": "^2.0.0",
-    "@quasar/quasar-app-extension-qmarkdown": "^1.4.0",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.12",
-    "workbox-webpack-plugin": "^5.1.4",
-    "prettier": "2.0.2"
+    "@quasar/app": "3",
+    "node-polyfill-webpack-plugin": "^1.1.4",
+    "prettier": "2.0.2",
+    "workbox-webpack-plugin": "^6.2.4"
   },
   "browserslist": [
     "last 10 Chrome versions",

quasar.conf.js

@@ -7,7 +7,7 @@ let API_LOCAL = 'http://localhost:3000',
     API_PRODUCTION = 'https://cycle-planet-backend.herokuapp.com'
 
 // Configuration for your app
-// https://quasar.dev/quasar-cli/quasar-conf-js
+// https://v2.quasar.dev/quasar-cli/quasar-conf-js
 // const path = require("path");
 // const SitemapPlugin = require('sitemap-webpack-plugin').default
 
@@ -18,27 +18,27 @@ let API_LOCAL = 'http://localhost:3000',
 //   { path: '/country/Togo' },
 //   { path: '/about' },
 //   { path: '/contact' },
-
-// ] 
-// const CopyWebpackPlugin = require('copy-webpack-plugin')
 
+// ]
+// const CopyWebpackPlugin = require('copy-webpack-plugin')
+const { configure } = require('quasar/wrappers');
 
-module.exports = function (ctx ) {
+module.exports = configure(function (ctx) {
   return {
-    // https://quasar.dev/quasar-cli/supporting-ts
+    // https://v2.quasar.dev/quasar-cli/supporting-ts
     supportTS: false,
 
-    // https://quasar.dev/quasar-cli/prefetch-feature
+    // https://v2.quasar.dev/quasar-cli/prefetch-feature
     // preFetch: true,
 
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
-    // https://quasar.dev/quasar-cli/boot-files
+    // https://v2.quasar.dev/quasar-cli/boot-files
     boot: [
       'axios',
     ],
 
-    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
+    // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: [
       'app.scss',
       'app.sass',
@@ -58,7 +58,7 @@ module.exports = function (ctx ) {
       'material-icons', // optional, you are not bound to it
     ],
 
-    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
+    // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
       env:{
         // API: API_LOCAL // API_LOCAL | API_PRODUCTION
@@ -68,14 +68,19 @@ module.exports = function (ctx ) {
       },
       vueRouterMode: 'history', // available values: 'history', 'history'
 
+      chainWebpack (chain) {
+        const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
+        chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
+      }
+
       // transpile: false,
 
       // Add dependencies for transpiling with Babel (Array of string/regex)
       // (from node_modules, which are by default not transpiled).
       // Applies only if "transpile" is set to true.
       // transpileDependencies: [],
 
-      // rtl: false, // https://quasar.dev/options/rtl-support
+      // rtl: true, // https://v2.quasar.dev/options/rtl-support
       // preloadChunks: true,
       // showProgress: false,
       // gzip: true,
@@ -84,7 +89,7 @@ module.exports = function (ctx ) {
       // Options below are automatically set depending on the env, set them if you want to override
       // extractCSS: false,
 
-      // https://quasar.dev/quasar-cli/handling-webpack
+      // https://v2.quasar.dev/quasar-cli/handling-webpack
       // extendWebpack(cfg, { isServer, isClient }) {
       //   cfg.resolve.alias = {
       //     ...cfg.resolve.alias, // This adds the existing alias
@@ -103,22 +108,22 @@ module.exports = function (ctx ) {
       //     })
       //   ),
       //   cfg.plugins.push(
-      //     new CopyWebpackPlugin([{ context: `${__dirname}/src/assets`, from: `*.*` }]) 
-      //   )   
+      //     new CopyWebpackPlugin([{ context: `${__dirname}/src/assets`, from: `*.*` }])
+      //   )
       // }
     },
 
-    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
+    // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
     devServer: {
       https: false,
       port: 7080,
       open: true, // opens browser window automatically
     },
 
-    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
+    // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
     framework: {
       iconSet: 'material-icons', // Quasar icon set
-      lang: 'en-us', // Quasar language pack
+      lang: 'en-US', // Quasar language pack
       // config: {
       //   brand:{
       //     primary: '#FCBA03',
@@ -132,7 +137,7 @@ module.exports = function (ctx ) {
       // * 'all'  - Manually specify what to import
       importStrategy: 'auto',
 
-      // For special cases outside of where "auto" importStrategy can have an impact
+      // For special cases outside of where the auto-import strategy can have an impact
       // (like functional components as one of the examples),
       // you can manually specify Quasar components/directives to be available everywhere:
       //
@@ -151,15 +156,15 @@ module.exports = function (ctx ) {
     },
 
     animations: 'all', // --- includes all animations
-    // https://quasar.dev/options/animations
+    // https://v2.quasar.dev/options/animations
     animations: [],
 
-    // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
+    // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
     ssr: {
       pwa: false
     },
 
-    // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
+    // https://v2.quasar.dev/quasar-cli/developing-pwa/configuring-pwa
     pwa: {
       workboxPluginMode: 'InjectManifest', // 'GenerateSW' or 'InjectManifest'
       workboxOptions: {}, // only for GenerateSW
@@ -201,17 +206,17 @@ module.exports = function (ctx ) {
       }
     },
 
-    // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
     cordova: {
       // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
     },
 
-    // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
     capacitor: {
       hideSplashscreen: true
     },
 
-    // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
     electron: {
       bundler: 'packager', // 'packager' or 'builder'
 
@@ -234,13 +239,10 @@ module.exports = function (ctx ) {
         appId: 'cpq'
       },
 
-      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
-      nodeIntegration: true,
-
       extendWebpack (/* cfg */) {
         // do something with Electron main process Webpack cfg
         // chainWebpack also available besides this extendWebpack
       }
     }
   }
-}
+});

quasar.extensions.json

@@ -1,6 +1,2 @@
 {
-  "@quasar/qmarkdown": {
-    "import_md": false,
-    "import_vmd": false
-  }
-}
+}

src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="q-app" class="ownfont bg-grey-2">
-    <router-view />
-  </div>
+  <router-view />
 </template>
 
 <script>

src/boot/axios.js

@@ -1,4 +1,18 @@
-import Vue from "vue";
-import axios from "axios";
+import { boot } from "quasar/wrappers"
+import axios from "axios"
+
+// Be careful when using SSR for cross-request state pollution
+// due to creating a Singleton instance here;
+// If any client changes this (global) instance, it might be a
+// good idea to move this instance creation inside of the
+// "export default () => {}" function below (which runs individually
+// for each client)
+
+export default boot(({ app }) => {
+  // for use inside Vue files (Options API) through this.$axios and this.$api
+
+  app.config.globalProperties.$axios = axios
+  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
+  //       so you won't necessarily have to import axios in each vue file
+})
 
-Vue.prototype.$axios = axios;

src/components/Map/Modals/AddMarkerList.vue

@@ -233,7 +233,6 @@
 import mixinGeneral from "src/mixins/mixin-general.js";
 // import { mapState, mapActions, mapGetters } from 'vuex'
 import { uid } from "quasar";
-import Vue from "vue";
 import { Geoapify } from "app/firebase-functions/shared/src/geoapify";
 import { geoapify } from "../../../boot/config.js";
 
@@ -331,7 +330,7 @@ export default {
               date_created: this.timeStamp,
               user_created: this.myUserId,
             };
-            Vue.set(this.bulkMarkers, markerId, markerData);
+            this.bulkMarkers[markerId] = markerData;
           })
           .catch((err) => {});
       }

src/components/Profile/EditProfileWeb.vue

@@ -19,9 +19,8 @@
       >
         <q-scroll-area class="fit">
           <q-list>
-            <template v-for="(menuItem, index) in menuList">
+            <template :key="index" v-for="(menuItem, index) in menuList">
               <q-item
-                :key="index"
                 clickable
                 @click="activelabel = menuItem.label"
                 :active="menuItem.label === activelabel"

src/mixins/mixin-general.js

@@ -2,7 +2,7 @@ import Vue from "vue";
 import { mapState, mapActions, mapGetters } from "vuex";
 import { date, uid, Notify } from "quasar";
 import { openURL } from "quasar";
-import { version } from "../../package.json";
+import pkg from "../../package.json";
 import { Platform } from "quasar";
 import { LocalStorage } from "quasar";
 import { getCountryData, countryConstants, getCountryDataByName, reverseCountryCodes } from "app/firebase-functions/shared/src/country-constants.js";
@@ -13,7 +13,7 @@ Vue.use(Embed);
 export default {
   data() {
     return {
-      version: version,
+      version: pkg.version,
 	  getCountryData: getCountryData,
       countryConstants: countryConstants,
       getCountryDataByName: getCountryDataByName,

src/router/index.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import VueRouter from "vue-router";
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
 import routes from "./routes";
 import VueAnalytics from "vue-analytics";
 
@@ -19,17 +19,19 @@ Vue.use(VueAnalytics, {
  */
 
 export default function (/* { store, ssrContext } */) {
-  const Router = new VueRouter({
-    scrollBehavior: () => ({ x: 0, y: 0 }),
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
     routes,
 
-    // Leave these as they are and change in quasar.conf.js instead!
+    // Leave this as is and make changes in quasar.conf.js instead!
     // quasar.conf.js -> build -> vueRouterMode
     // quasar.conf.js -> build -> publicPath
-    // mode: 'history',
-    mode: process.env.VUE_ROUTER_MODE,
-    base: process.env.VUE_APP_DEBUG_NAME,
-  });
+    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
+  })
 
-  return Router;
+  return Router
 }

src/router/routes.js

@@ -108,7 +108,7 @@ const routes = [
   // Always leave this as last one,
   // but you can also remove it
   {
-    path: "*",
+    path: "/:catchAll(.*)*",
     component: () => import("pages/Error404.vue"),
   },
 ];

src/store/index.js

@@ -1,5 +1,4 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import { createStore } from "vuex";
 
 import settings from "./store-settings";
 import auth from "./store-auth";
@@ -12,8 +11,6 @@ import other from "./store-other";
 import admin from "./store-admin";
 import markers from "./store-markers";
 
-Vue.use(Vuex);
-
 /*
  * If not building with SSR mode, you can
  * directly export the Store instantiation;
@@ -24,7 +21,7 @@ Vue.use(Vuex);
  */
 
 export default function (/* { ssrContext } */) {
-  const Store = new Vuex.Store({
+  const Store = createStore({
     modules: {
       settings,
       auth,