[Vue3][Quasar2] Switch to new framework versions

.eslintrc.js

@@ -38,9 +38,9 @@ module.exports = {
     // Uncomment any of the lines below to choose desired strictness,
     // but leave only one uncommented!
     // See https://eslint.vuejs.org/rules/#available-rules
-    'plugin:vue/essential', // Priority A: Essential (Error Prevention)
-    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-    // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+    'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
@@ -66,6 +66,10 @@ module.exports = {
     ga: true, // Google Analytics
     cordova: true,
     __statics: true,
+    __QUASAR_SSR__: true,
+    __QUASAR_SSR_SERVER__: true,
+    __QUASAR_SSR_CLIENT__: true,
+    __QUASAR_SSR_PWA__: true,
     process: true,
     Capacitor: true,
     chrome: true

package.json

@@ -11,30 +11,27 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.9.10",
-    "@vue/composition-api": "^0.6.4",
-    "axios": "^0.21.0",
+    "axios": "^0.21.1",
     "cordova": "^10.0.0",
     "core-js": "^3.7.0",
-    "prettier": "^2.2.1",
-    "quasar": "^1.14.5",
-    "uuid": "^8.3.2",
-    "vue-router": "3.3.2"
+    "quasar": "^2.0.0-alpha.15",
+    "vue-router": "4.0.3"
   },
   "devDependencies": {
-    "@quasar/app": "^2.1.8",
+    "@quasar/app": "^3.0.0-alpha.8",
     "@quasar/quasar-app-extension-qcalendar": "^3.3.4",
     "@types/node": "^12.19.6",
-    "@types/uuid": "^8.3.0",
-    "@types/webpack": "^4.41.25",
+    "@types/webpack": "^4.41.26",
     "@types/webpack-env": "^1.16.0",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@typescript-eslint/parser": "^4.8.2",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.14.0",
+    "eslint": "^7.15.0",
     "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-vue": "^7.1.0",
-    "eslint-webpack-plugin": "^2.4.0",
-    "typescript": "^4.1.2"
+    "eslint-plugin-vue": "^7.5.0",
+    "eslint-webpack-plugin": "^2.4.3",
+    "prettier": "^2.2.1",
+    "typescript": "^4.1.3"
   },
   "browserslist": [
     "last 10 Chrome versions",

quasar.conf.js

@@ -5,18 +5,23 @@
 
 // Configuration for your app
 // https://quasar.dev/quasar-cli/quasar-conf-js
+
 /* eslint-env node */
-/* eslint-disable @typescript-eslint/no-var-requires */
+const ESLintPlugin = require('eslint-webpack-plugin')
 const { configure } = require('quasar/wrappers');
 
-module.exports = configure(function(ctx) {
+module.exports = configure(function (/* ctx */) {
   return {
+    // https://quasar.dev/quasar-cli/supporting-ts
     // https://quasar.dev/quasar-cli/supporting-ts
     supportTS: {
       tsCheckerConfig: {
-        eslint: true
-      }
+        eslint: {
+          enabled: true,
+          files: './src/**/*.{ts,tsx,js,jsx,vue}',
         },
+      }
+    }
 
     // https://quasar.dev/quasar-cli/prefetch-feature
     // preFetch: true,
@@ -24,7 +29,7 @@ module.exports = configure(function(ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/boot-files
-    boot: ['composition-api', 'axios', 'plugins', 'loading', 'filter', 'login'],
+    boot: ['axios', 'plugins', 'loading', 'filter', 'login'],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: ['app.scss'],
@@ -40,7 +45,7 @@ module.exports = configure(function(ctx) {
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 
       'roboto-font', // optional, you are not bound to it
-      'material-icons' // optional, you are not bound to it
+      'material-icons', // optional, you are not bound to it
     ],
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
@@ -64,16 +69,15 @@ module.exports = configure(function(ctx) {
       // extractCSS: false,
 
       // https://quasar.dev/quasar-cli/handling-webpack
-      extendWebpack(cfg) {
-        // linting is slow in TS projects, we execute it only for production builds
-        if (ctx.prod) {
-          const ESLintPlugin = require('eslint-webpack-plugin');
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpack (chain) {
+        chain.plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{
+            extensions: [ 'js', 'vue' ],
+            exclude: 'node_modules'
+          }])
+        },
       
-          cfg.plugins.push(new ESLintPlugin({
-            extensions: ['ts']
-          }));
-        }
-      }
     },
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
@@ -96,12 +100,7 @@ module.exports = configure(function(ctx) {
         }
       },
 
-      // Possible values for "importStrategy":
-      // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
-      // * '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 stategy can have an impact
       // (like functional components as one of the examples),
       // you can manually specify Quasar components/directives to be available everywhere:
       //
@@ -175,11 +174,13 @@ module.exports = configure(function(ctx) {
 
       packager: {
         // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+
         // OS X / Mac App Store
         // appBundleId: '',
         // appCategoryType: '',
         // osxSign: '',
         // protocol: 'myapp://path',
+
         // Windows only
         // win32metadata: { ... }
       },
@@ -193,10 +194,10 @@ module.exports = configure(function(ctx) {
       // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
       nodeIntegration: true,
 
-      extendWebpack(/* cfg */) {
+      extendWebpack (/* cfg */) {
         // do something with Electron main process Webpack cfg
         // chainWebpack also available besides this extendWebpack
       }
     }
-  };
+  }
 });

src/App.vue

@@ -1,10 +1,8 @@
 <template>
-  <div id="q-app">
   <router-view />
-  </div>
 </template>
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'App',

src/boot/composition-api.ts

@@ -1,7 +0,0 @@
-import VueCompositionApi from '@vue/composition-api';
-import { VueConstructor } from 'vue';
-import { boot } from 'quasar/wrappers';
-
-export default boot(({ Vue }: { Vue: VueConstructor }) => {
-  Vue.use(VueCompositionApi);
-});

src/config.ts

@@ -1,5 +1,5 @@
 const config = {
-  baseURL: '/api'
+  baseURL: '/api',
 };
 
 export default config;

src/store/store-flag.d.ts

@@ -1,9 +0,0 @@
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import 'quasar/dist/types/feature-flag';
-
-declare module 'quasar/dist/types/feature-flag' {
-  interface QuasarFeatureFlags {
-    store: true;
-  }
-}

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "extends": "@quasar/app/tsconfig-preset",
   "compilerOptions": {
-    "types": ["node", "webpack-env", "@quasar/app"],
     "baseUrl": ".",
+    "types": ["node", "webpack-env", "@quasar/app"],
     "lib": ["DOM", "ES2019"]
  }
 }