feat: Upgrade to Quasar v2

quasarframework · Sep 8, 2021 · 58b92b5 · 58b92b5
1 parent eafa086
commit 58b92b5
Show file tree

Hide file tree

Showing 21 changed files with 260 additions and 176 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,19 +1,32 @@
-.quasar
 .DS_Store
 .thumbs.db
 node_modules
+
+# Quasar core related directories
+.quasar
 /dist
+
+# Cordova related directories and files
 /src-cordova/node_modules
 /src-cordova/platforms
 /src-cordova/plugins
 /src-cordova/www
+
+# Capacitor related directories and files
+/src-capacitor/www
+/src-capacitor/node_modules
+
+# BEX related directories and files
+/src-bex/www
+/src-bex/js/core
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

diff --git a/.prettierrc b/.prettierrc
@@ -8,4 +8,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "fluid": false
-}
+}
diff --git a/.stylintrc b/.stylintrc
diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@
 **Click the "Fork" button to get started!**
 
 # Quasar App Codesandbox Template
+
 > A Template for using Quasar on Codesandbox.io.
 
 ![Codesanbox Entry Server Screen](https://cdn.quasar.dev/codesandbox/codesandbox-entry.jpg)
@@ -27,7 +28,7 @@ The server and container will start automatically. Once you make any change and
 
 ## Different Modes
 
-This template currently loads a *SPA* application mode of Quasar.
+This template currently loads a _SPA_ application mode of Quasar.
 
 If you would like to work with the PWA or SSR versions of Quasar, please make the following changes to the `start` script entries in the `package.json`.
 
@@ -57,7 +58,7 @@ Once that is done, it should take a minute or so to reload the application in th
 
 ## Quasar Repositories
 
-* [Quasar Framework](https://github.com/quasarframework/quasar)
+- [Quasar Framework](https://github.com/quasarframework/quasar)
 
 ## Contributing
 

diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "src/*": [
+        "src/*"
+      ],
+      "app/*": [
+        "*"
+      ],
+      "components/*": [
+        "src/components/*"
+      ],
+      "layouts/*": [
+        "src/layouts/*"
+      ],
+      "pages/*": [
+        "src/pages/*"
+      ],
+      "assets/*": [
+        "src/assets/*"
+      ],
+      "boot/*": [
+        "src/boot/*"
+      ],
+      "vue$": [
+        "node_modules/vue/dist/vue.runtime.esm-bundler.js"
+      ]
+    }
+  },
+  "exclude": [
+    "dist",
+    ".quasar",
+    "node_modules"
+  ]
+}
diff --git a/package.json b/package.json
@@ -11,12 +11,13 @@
     "test": "echo \"No test specified\" && exit 0"
   },
   "dependencies": {
-    "@quasar/extras": "^1.8.2",
+    "@quasar/extras": "^1.10.12",
     "core-js": "^3.6.5",
-    "quasar": "^1.12.7"
+    "quasar": "^2.0.4",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@quasar/app": "^2.0.0"
+    "@quasar/app": "^3.1.0"
   },
   "browserslist": [
     "last 10 Chrome versions",
@@ -30,7 +31,7 @@
     "last 5 Opera versions"
   ],
   "engines": {
-    "node": ">= 10.17.0",
+    "node": ">= 12.22.1",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.19.1"
   }

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/quasar-logo.png b/public/quasar-logo.png
diff --git a/quasar.conf.js b/quasar.conf.js
@@ -1,18 +1,29 @@
+/*
+ * This file runs in a Node context (it's NOT transpiled by Babel), so use only
+ * the ES6 features that are supported by your Node version. https://node.green/
+ */
+
 // Configuration for your app
-// https://quasar.dev/quasar-cli/quasar-conf-js
+// https://v2.quasar.dev/quasar-cli/quasar-conf-js
+
+/* eslint-env node */
 
-module.exports = function (ctx) {
+const { configure } = require('quasar/wrappers')
+
+module.exports = configure(function (ctx) {
   return {
-    // https://quasar.dev/quasar-cli/prefetch-feature
+    // https://v2.quasar.dev/quasar-cli/supporting-ts
+    supportTS: false,
+
+    // 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
-    boot: [
-    ],
+    // https://v2.quasar.dev/quasar-cli/boot-files
+    boot: [],
 
-    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
+    // https://v2.quasar.dev/quasar-cli/quasar-conf-js#property-css
     css: [
       'app.sass'
     ],
@@ -28,10 +39,10 @@ module.exports = 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
+    // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#property-build
     build: {
       vueRouterMode: 'history', // available values: 'hash', 'history'
 
@@ -42,7 +53,7 @@ module.exports = function (ctx) {
       // Applies only if "transpile" is set to true.
       // transpileDependencies: [],
 
-      // rtl: false, // https://quasar.dev/options/rtl-support
+      // rtl: false, // https://v2.quasar.dev/options/rtl-support
       // preloadChunks: true,
       // showProgress: false,
       // gzip: true,
@@ -51,44 +62,75 @@ 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
-      // extendWebpack (cfg) {},
+      // https://v2.quasar.dev/quasar-cli/handling-webpack
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpack (chain, { isServer, isClient }) {
+        //
+      }
     },
 
-    // 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-devserver
     devServer: {
       open: false, // leave this here for Codesandbox to work
-      public: 'http://0.0.0.0' // leave this here for Codesandbox to work
+      client: {
+        webSocketURL: 'http://0.0.0.0' // leave this here for Codesandbox to work
+      }
     },
 
-    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
+    // https://v2.quasar.dev/quasar-cli/quasar-conf-js#property-framework
     framework: {
       iconSet: 'material-icons', // Quasar icon set
-      lang: 'en-us', // Quasar language pack
+      lang: 'en-US', // Quasar language pack
       config: {},
 
-      // 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 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:
+      //
+      // components: [],
+      // directives: [],
 
       // Quasar plugins
       plugins: []
     },
 
     // 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
+      pwa: false,
+
+      // manualStoreHydration: true,
+      // manualPostHydrationTrigger: true,
+
+      // The default port that the production server should use
+      // (gets superseded if process.env.PORT is specified at runtime)
+      prodPort: 3000,
+
+      // Tell browser when a file from the server should expire from cache (in ms)
+      maxAge: 1000 * 60 * 60 * 24 * 30,
+
+      chainWebpackWebserver (chain) {
+        //
+      },
+
+      middlewares: [
+        ctx.prod ? 'compression' : '',
+        'render' // keep this as last one
+      ]
     },
 
-    // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
+    // https://v2.quasar.dev/quasar-cli/developing-pwa/configuring-pwa
     pwa: {
-      // workboxPluginMode: 'InjectManifest',
-      // workboxOptions: {},
+      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
+      workboxOptions: {}, // only for GenerateSW
+
+      chainWebpackCustomSW (chain) {
+        //
+      },
+
       manifest: {
         // name: 'Quasar App',
         // short_name: 'Quasar-PWA',
@@ -99,32 +141,32 @@ module.exports = function (ctx) {
         theme_color: '#027be3',
         icons: [
           {
-            'src': 'icons/icon-128x128.png',
-            'sizes': '128x128',
-            'type': 'image/png'
+            src: 'icons/icon-128x128.png',
+            sizes: '128x128',
+            type: 'image/png'
           },
           {
-            'src': 'icons/icon-192x192.png',
-            'sizes': '192x192',
-            'type': 'image/png'
+            src: 'icons/icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
           },
           {
-            'src': 'icons/icon-256x256.png',
-            'sizes': '256x256',
-            'type': 'image/png'
+            src: 'icons/icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png'
           },
           {
-            'src': 'icons/icon-384x384.png',
-            'sizes': '384x384',
-            'type': 'image/png'
+            src: 'icons/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png'
           },
           {
-            'src': 'icons/icon-512x512.png',
-            'sizes': '512x512',
-            'type': 'image/png'
+            src: 'icons/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
           }
         ]
       }
     }
   }
-}
+})
diff --git a/sandbox.config.json b/sandbox.config.json
@@ -1,3 +1,6 @@
 {
-  "template": "node"
+  "template": "node",
+  "container": {
+    "node": "14"
+  }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,11 @@
 <template>
-  <div id="q-app">
-    <router-view />
-  </div>
+  <router-view />
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'App'
-}
+})
 </script>