quasarframework / quasar-starter-kit

Quasar CLI Starter Kit

DEPRECATED

DEPRECATED in favor of https://github.com/quasarframework/quasar/tree/dev/create-quasar

Quasar Framework App Template

Starter Kit for a Quasar Project.

Usage

First, make sure you have Node >= 8 and NPM >= 5.

# install Quasar CLI:
$ npm install -g @quasar/cli

# generate a project folder
$ quasar create <folder_name>

$ cd my-project
$ yarn

# start developing your app
$ quasar dev

# Check CLI commands available:
$ quasar

To generate a project folder with an older version of Quasar:

# notice "-b" parameter
$ quasar create my-project -b v0.17

Quasar Framework

Build responsive Single Page Apps, SSR Apps, PWAs, Hybrid Mobile Apps and Electron Apps, all using the same codebase!, powered with Vue.

Supporting Quasar

Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.

Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.

Documentation

Head on to the Quasar Framework official website: https://quasar.dev

Community Forum

Head on to the official community forum: https://forum.quasar.dev

Contributing

I'm excited if you want to contribute to Quasar under any form (report bugs, write a plugin, fix an issue, write a new feature).

Issue Reporting Guidelines

Please use the appropriate Github repo to report issues. See "Related Components" above. For example, a bug related to CLI should be reported to the CLI repo, one related to build issues to Quasar Framework Templates repo and so on.

• The issue list of the repository is exclusively for bug reports and feature requests. For anything else please use the Community Forum.

• Try to search for your issue, it may have already been fixed in the development branch or it may have a resolution.

• Check if the issue is reproducible with the latest stable version of Quasar. If you are using a pre-release, please indicate the specific version you are using.

• It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.

• If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.

License

Copyright (c) 2016-present Razvan Stoenescu

MIT License

quasar-starter-kit's Issues

vendor.*.js throws TypeError: *.e is not a function (blank page, crashed)

Software version

Operating System Linux(4.13.0-45-generic) - linux/x64
NodeJs 8.11.2
Global packages
NPM 6.1.0
yarn 1.7.0
quasar-cli 0.16.4
vue-cli 2.9.6
cordova Not installed
Important local packages
quasar-cli 0.16.4 (Quasar Framework CLI)
quasar-framework 0.16.0 (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
quasar-extras 2.0.2 (Quasar Framework fonts, icons and i18n.)
vue 2.5.16 (Reactive, component-oriented view layer for modern web interfaces.)
vue-router 3.0.1 (Official router for Vue.js 2)
vuex 3.0.1 (state management for Vue.js)
electron Not installed
electron-packager Not installed
electron-builder Not installed
@babel/core 7.0.0-beta.49 (Babel compiler core.)
webpack 4.9.1 (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
webpack-dev-server 3.1.4 (Serves a webpack app. Updates the browser on changes.)
workbox-webpack-plugin 3.2.0 (A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)
OS: Ubuntu 17.10
Browsers: Chromium 66/Firefox 60
Any other software related to your bug: [email protected]

What did you get as the error?

blank page/js crashed

Stack trace:
vendor.ded481d8.js:14 TypeError: i.e is not a function
at component (vendor.ded481d8.js:14)
at vendor.ded481d8.js:14
at vendor.ded481d8.js:14
at Array.map ()
at vendor.ded481d8.js:14
at Array.map ()
at Vt (vendor.ded481d8.js:14)
at vendor.ded481d8.js:14
at h (vendor.ded481d8.js:14)
at n (vendor.ded481d8.js:14)

What were you expecting?

page to load OK without errors

What steps did you take, to get the error?

1. quasar init myproject (makes no difference which options are selected)
2. cd myproject && npm install
3. quasar build -m spa (same outcome with -m pwa)
4. http-server dist/spa-mat/

Further notes:

1. It works fine in dev mode this is only an issue with build
2. In the vendor file it's ocurring in the line under the comment
   /*!

• Determine if an object is a Buffer
• @author Feross Aboukhadijeh https://feross.org
• @license MIT
  */

3. Here's other things I tried (none fixed it):
   a.. Rolled back quasar-cli to 0.16.1, fresh init/build
   b. Rolled back vue-init to 2.9.6, fresh init/build
   c. Rolled back quasar-cli to 0.15.4, fresh init/build

However my previous (working fine) quasar project was built using v0.15.4 (only about 2-3 months ago)
So I am quite sure a recent change in the starter-kit template is causing this.
I can see there have been a few in this window mainly around babel config/versions and other version changes.

4. Other users have noticed this issue (quasarframework/quasar#2103)

Any help appreciated.

Rgds
Mike

i18n plugin imports store but doesn't use it

Software version

Quasar: 0.15.1
OS: Manjaro Linux
Node: 9.5.0

What did you get as the error?

Linter throws a no unusded vars erro

What were you expecting?

No errors from the linter in the starter kit

What steps did you take, to get the error?

Simply run the starter kit with
quasar init <project>
enable linter and select AirBnb style.
Then start quasar dev.
It will not start and give a 'no-unused-vars' error. It's quite simple to solve since the i18n plugin imports the store but never uses it. Either add something like locale: store.state.locale or don't import the store.

I guess for the educational purposes it's good to have the store imported and since the locale variable is not defined in the store yet, it's good not to use it, but this way you get immediately an error.

Outdated dependency warnings

When scaffolding a new project with the Quaser CLI, there are several warnings about outdated dependencies:

warning @quasar/app > webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning Resolution field "@babel/[email protected]" is incompatible with requested version "@babel/parser@^7.9.6"
warning @quasar/app > webpack-dev-server > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @quasar/app > node-sass > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning @quasar/app > node-sass > node-gyp > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning Resolution field "@babel/[email protected]" is incompatible with requested version "@babel/parser@^7.8.6"
warning Resolution field "@babel/[email protected]" is incompatible with requested version "@babel/parser@^7.9.6"
warning @quasar/app > @quasar/babel-preset-app > @babel/runtime-corejs2 > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning @quasar/app > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @quasar/app > @quasar/babel-preset-app > babel-plugin-transform-imports > babel-types > babel-runtime > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

To Reproduce
I am following the steps in the Quasar CLI Installation guide.

Expected behavior
Core dependencies for the Quasar CLI would be kept up to date.

Platform (please complete the following information):
OS: Ubuntu Linux
Node: 12
NPM:
Yarn: 1.22.4

Support TS properly for other ESLint presets and/or make Prettier the recommended TS preset

Is your feature request related to a problem? Please describe.
Current ESLint presets are supporting TS. But, you can experience some problems as you start writing more code. abraxxa#9791 from our community Discord server reported that defining enums are ending up with the no-unused-vars error. So, I decided to investigate a bit and found out that StandardJS and Airbnb don't 100% cover TS out of the box.

Describe the solution you'd like
Install and configure https://github.com/standard/eslint-config-standard-with-typescript for StandardJS and https://github.com/iamturns/eslint-config-airbnb-typescript for Airbnb.

Since this can increase the complexity and maintenance burden of this project, just marking Prettier as recommended would be a fine choice as well. Even if we end up improving the other presets, I personally think we should make Prettier the recommended preset for TS, because it'll always work as-is and the code style is closer to what the TS community uses.

Describe alternatives you've considered
Adjusting a few rules when needed.
Manually installing those presets when needed.

Additional context

Starter Kits Capacitor iOS builds in simulator but times out on device

Describe the bug
When building for device, the starter kit (fresh, nothing added, etc) correctly builds for the simulator, but times out on the device with a blank, white screen.
Xcode console says:
⚡️ WebView failed provisional navigation ⚡️ Error: The request timed out.

To Reproduce
Steps to reproduce the behavior:
$ quasar create myproject
follow prompts. my answers:

• css: Sass
• import strategy: Auto import
• features: ESLint, Vuex, Axios, Vue-i18n
• ESLint preset: Standard
• npm install
• quasar mode add capacitor
• quasar dev -m capacitor -T ios

then in Xcode:
select account for team under Signing & Certificates

Build for simulator (iPhone 11) --- all works as expected
Build for plugged in device (iPhone) -- the issue above.

Expected behavior
for the starter kit to build as it does on simulator.

Platform (please complete the following information):
OS: Mac 10.15.4
Node: v12.13.0
NPM: 6.14.4
Device: iPhone X
iOS: 13.4.1

Additional context
I have gone through the docs, but perhaps I missed something glaring. Apologies if so.
combing Google results for the error kept ending in the issue being about connecting to external resource

Fuller XCode console message:
Reachable via Cellular APP ACTIVE SplashScreen.hideSplash: SplashScreen was automatically hidden after default timeout. You should call SplashScreen.hide() as soon as your web app is loaded (or increase the timeout). Read more at https://capacitor.ionicframework.com/docs/apis/splash-screen/#hiding-the-splash-screen ⚡️ WebView failed provisional navigation ⚡️ Error: The request timed out.

Cheers and thanks for any guidance

Including module-example in store prevents SSR from rendering

Describe the bug

Trying to include module-example in your newly created typescript project will prevent SSR from working properly.

This issue does not occur when creating a new store with the CLI, as the CLI does not create new stores with a module format (it'll export default a dict, it doesn't create a Module that it then exports).

To Reproduce
Steps to reproduce the behavior:

1. $ quasar create example # Enable Vuex, Typescript and Class based composition during this
2. Go to store/index.ts and uncomment lines 4, 5, and 24. This is to include the module-example in your store.
3. $ quasar dev -m ssr
4. Load the page on your web browser, you will encounter:

And in the console

Expected behavior
The page should load normally. It does load normally if you run $ quasar dev -m spa

Platform (please complete the following information):
OS: Windows 10
Node: v12.17.0
NPM: 6.14.4

Additional context
I have identified the fix for this and talked to @IlCallo in @discord/V1 Help/#ssr about this. I'm creating the issue so I can create the PR to rename module in module-example/index.ts to exampleModule.

Browserlist is too inclusive

Describe the bug
The browserlist includes Safari 13 that adds 42 kB of polyfill with core-js.
Remove unrelevant polyfill.

To Reproduce
Browserlist currently includes support for Safari 13 and Safari 13 for IOS.
Safari 13 and versions below is used by ~2.53% as seen on https://caniuse.com/webp.

Expected behavior
See below

Screenshots
Current browserlist:

"last 10 Chrome versions",
"last 10 Firefox versions",
"last 4 Edge versions",
"last 5 Opera versions",
"last 8 Android versions",
"last 8 ChromeAndroid versions",
"last 8 FirefoxAndroid versions",
"last 7 Safari versions",
"last 10 iOS versions"

Browserlist without Safari 13:

"last 10 Chrome versions",
"last 10 Firefox versions",
"last 4 Edge versions",
"last 7 Safari versions, not safari < 14",
"last 8 Android versions",
"last 8 ChromeAndroid versions",
"last 8 FirefoxAndroid versions",
"last 10 iOS versions, not ios_saf < 14",
"last 5 Opera versions"

Platform (please complete the following information):
OS: Linux
Node: 16
NPM: 8
Yarn: 1.22
Browsers: Firefox
iOS:
Android:
Electron:

Additional context
Add any other context about the problem here.

ESLint 8 support

Keeping track of eslint deps ESLint8 support status

TS ecosystem is nearly ready, JS is still lagging

Already support ESLint8 and safe/tested versions:

• eslint-plugin-vue -> 7.20.0
• eslint-plugin-import -> 2.25.1
• eslint-config-prettier -> 8.3.0
• @typescript-eslint/* -> 5.2.0

Support still missing:

• eslint-webpack-plugin: the support PR has already been merged yesterday, not released yet (webpack-contrib/eslint-webpack-plugin#121)
• eslint-config-standard: work in progress (standard/eslint-config-standard#193)
• eslint-plugin-node: should work, but there's some regressions (mysticatea/eslint-plugin-node#294)
• eslint-plugin-promise: work in progress (eslint-community/eslint-plugin-promise#219)
• eslint-config-airbnb-base: no support right now (airbnb/javascript#2478)

Feature: command line option to re-apply templates

Is your feature request related to a problem?
It would be great if there was a way to fix your project with the latest template.

Describe the solution you'd like
After an upgrade it would allow quasar to reinitialize itself, something like this:

quasar sync`

Describe alternatives you've considered
Looking in the quasar template folder and copying all templates over.

Additional context
This was an idea discussed with @IlCallo .

Composition API not instantiated fast enough to be used outside of components

Describe the bug

On request of @IlCallo we create this issue:

We created a composition function that contains logic to verify if a user is logged on or not. This function would also be called in the file /router/index.ts to safe guard routes.

At the moment the composition API is loaded from within in a Quasar boot file. This works fine when using composition functions in Vue components but not when you want to access them elsewhere.

To Reproduce

1. Create a boot file that loads the composition API (I believe the starter kit does this)

// boot/CompositionAPI
import VueCompositionApi from '@vue/composition-api';
import { boot } from 'quasar/wrappers';

export default boot(({ Vue }) => {
  Vue.use(VueCompositionApi);
});

2. Create a composition function

// useAccount.ts
import { computed, ref } from '@vue/composition-api'
import { isInternetExplorer } from 'src/services/utils/utilsService'
import { Screen } from 'quasar'
import { auth, getAllScopes } from 'src/services/auth/authService'

const isLoginPopup = Screen.lt.sm || isInternetExplorer ? false : true
const accountID = ref('')

export const setAccountID = () => {
  const account = auth.getAccount()

  if (account) {
    accountID.value = account.idTokenClaims.oid
  } else {
    accountID.value = ''
  }
}

export const useAccount = () => {
  const loading = ref(false)
  const disabled = ref(false)

  const login = async () => {
    loading.value = true
    disabled.value = true

    const allScopes = getAllScopes()

    if (isLoginPopup) {
      try {
        await auth.loginPopup(allScopes)
      } finally {
        setAccountID()
        disabled.value = false
        loading.value = false
      }
    } else {
      auth.loginRedirect(allScopes) // page reload
    }
  }
  const logout = () => {
    auth.logout()
  }
  return {
    accountID: computed(() => accountID.value),
    isAuthenticated: computed(() => Boolean(accountID.value)),
    loading: computed(() => loading.value),
    disabled: computed(() => disabled.value),
    login, logout,
  }
}

3. Try to use the computed property isAuthenticated outside a component:

// /router/index.ts
import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import routes from './routes'
import { useAccount } from 'src/comp-functions/useAccount'

const { isAuthenticated } = useAccount()

export default route(function ({ Vue }) {
Vue.use(VueRouter)

  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE,
  })

  Router.beforeEach((to, from, next) => {
    if (isAuthenticated.value || to.path === '/' || to.path === '/login') {
      next()
    } else {
      next('/login')
    }
  })

  return Router
})

4. See error:

Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function

Expected behavior
Simply being able to use the computed property from the composition function.

Additional context
See also StackOverflow..

Workaround

1. Create a file to load the plugin:

// services/vue/CompositionApi.ts
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

2. Load the composition API as soon as possible:

// /router/index.ts
import 'src/services/vue/CompositionApi'

import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import routes from './routes'

Failed to Download Starter Kit when Creating Quasar Project

I have installed Quasar on a new MacBook and when I try to create a new quasar project I get the following error:
Quasar CLI · Failed to download repo quasarframework/quasar-starter-kit#master: EPERM: operation not permitted, utime '/Users/mymac/.quasar-starter-kits/quasarframework-quasar-starter-kit#master/.github'

Searching Google doesn't come up with much, but one result was that possibly the starter kit download is not currently available. Could this be the case?

This is my Quasar Info:

An issue

Software version

Quasar:
OS:
Node:
NPM:
Browsers:
iOS:
Android:
Any other software related to your bug:

What did you get as the error?

What were you expecting?

What steps did you take, to get the error?

[RFC] Add test runners to project during quasar init

This RFC is about enabling the installation and integration of unit test-runners, e2e frameworks and quality control into the Quasar Framework. It is not a discussion about "if we should do this", but rather a discussion about the approach. After meeting with several contributors helping to scaffold the testing mode, our current opinion about how the flow should work is as follows:

0. The user calls quasar init mypackage
1. The user is asked if they want to include one of each of test types
   a. UNIT TEST (ava, jasmine, jest, mocha, tap) includes istanbul/nyc, chai, sinon
   b. E2E TEST (cypress, karma, nightwatch)
   c. QUALITY (lighthouse)
2. These decisions are passed back to quasar-cli
3. quasar-cli adds the mypackage/test folder, installs the base @quasar-test/base repo
4. Each of the above test runners is a folder within the namespaced monorepo which are also installed (such as @quasar-test/ava, @quasar-test/cypress, @quasar-test/lighthouse)
5. As a post-install step, test-runner configs, src and output folders are copied or created in the mypackage/test folder.
6. Where necessary, the mypackage/package.json is updated with configs for the test runners.
7. Test commands are created in the mypackage/package.json, so that the user can run tests with yarn/npm.
8. Where necessary, webpack-chain commands and aliases are added to mypackage/quasar.conf.js
9. mypackage/.babelrc is updated accordingly
10. Upon conclusion, the "test mode" is set and visible when the user runs quasar mode:

The monorepo is under construction here:

https://github.com/quasarframework/quasar-test

Test runners currently verified to have valid "integration" at the moment are checked off in the following list:

UNIT

• @vue/test-utils
• ava
• chai
• jest23
• mocha
• mocha-loader (for webpack)
• mocha-webpack
• jasmine
• sinon
• tap
• tape

E2E

• appium (cordova)
• cypress
• karma
• nightwatch
• spectron (electron)

QUALITY

• lighthouse 3.0
• import-cost
• bundlesize

List of known javascript unit-testing frameworks
this comment will be updated as more land

Matching Quasar Cli RFC regarding quasar test
quasarframework/quasar-cli/issues/127

EssentialLink does not use openURL

EssentialLink should use Quasar's standard way to open external URL.

Instead, it hard-codes tag="a", target="_blank" and :href="link", which is too low-level and is not the best known method to open external links in the framework.

Reference: https://github.com/quasarframework/quasar-starter-kit/blob/master/template/src/components/EssentialLink.vue#L4

  <q-item
    clickable
    tag="a"
    target="_blank"
    :href="link"
  >

SSR mode use axios cross-request state pollution

Using axios according to the template generated by the current cli has the problem of cross-request state pollution, and the ssr part of the document does not correctly explain it.

You can refer to this article to modify.

https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl

But this article is based on the old version of v1, the way I use it in the v2 version is：

import { boot } from "quasar/wrappers";
import axios, { AxiosInstance } from "axios";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
  }
}
declare module "vuex/types/index" {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface Store<S> {
    $axios: AxiosInstance;
  }
}

declare module "vue-router/dist/vue-router" {
  interface Router {
    $axios: AxiosInstance;
  }
}

export default boot(({ app, store, router, ssrContext }) => {
  // 避免交叉请求状态污染 (cross-request state pollution)
  const $axios = axios.create();
  app.config.globalProperties.$axios = $axios;
  store.$axios = $axios;
  router.$axios = $axios;
});

Auto sitemap generation

I'm still learning about optimizing my Quasar websites for search engines.
One of the things Google suggests at their search console is to upload a sitemap.

It would be great if Quasar could provide the sitemap generation from the box.

Other sources that could be taken into consideration:
https://github.com/chrisvfritz/prerender-spa-plugin
But these are very high level and not easy to understand.

i18n: switch language programmatically

Hello,
I am playing with the i18n plugin and I think it would be useful to have a way to switch language programmatically, the only way I found is the next one:

plugins/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from 'src/i18n'

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'en-us',
  fallbackLocale: 'en-us',
  messages
})

export default ({ app }) => {
  // Set i18n instance on app
  app.i18n = i18n
}

export { i18n }

then I can do:

import { i18n } from '../plugins/i18n'
...
if (lang !== i18n.locale) {
  i18n.locale = lang
}

Mind that this will not redraw like:

this.$i18n.locale = lang

What do you think about this approach? I can do a PR if it's not completely wrong.
Cheers,
Francesco

Relative module not found on i18n - branch next

Describe the bug
After you generate a new project, with i18n included, and run quasar dev, it doesn't compile,
because the relative import on i18n has the wrong casing:

quasar-starter-kit/template/src/i18n/index.js

Line 1 in b202150

import enUS from './en-US'

quasar-starter-kit/template/src/i18n/index.ts

Line 1 in b202150

import enUS from './en-US';

import enUS from './en-US'

but the directory is en-us.

To Reproduce
Create an new project:
quasar create quasar.i18n-issue-n5 --branch next

? Project name (internal usage for dev) quasar.i18n-issue-n5
? Project product name (must start with letter if building mobile apps) Quasar App
? Project description A Quasar Framework app
? Author
? Pick your CSS preprocessor: SCSS
? Check the features needed for your project: Vue-i18n
? Continue to install project dependencies after the project has been created? (recommended) yarn

Run quasar dev.

You get this error:

Failed to compile with 1 errors

This relative module was not found:

* ./en-US in ./src/i18n/index.js

Expected behavior
The generated project template should compile.

Platform (please complete the following information):
OS: Debian GNU/Linux 9 (Docker)
Node: v14.15.1
NPM:
Yarn: 1.22.5
Browsers:
iOS:
Android:
Electron:

Pkg quasar........ v2.0.0-beta.5
Pkg @quasar/app... v3.0.0-beta.7

Additional context
Add any other context about the problem here.

prop "letter" QItemSide

Global packages

NPM 6.4.1
yarn Not installed
quasar-cli 0.17.19
vue-cli 2.9.6
cordova 8.0.0

Important local packages

1. quasar-cli 0.17.19 (Quasar Framework CLI)
2. quasar-framework 0.17.16 (Build responsive SPA, SSR, PWA, Hybrid ## Mobile Apps and Electron apps, all simultaneously using the same codebase)
3. quasar-extras 2.0.6 (Quasar Framework fonts, icons and animations)
4. vue 2.5.17 (Reactive, component-oriented view layer for modern web interfaces.)
5. vue-router 3.0.1 (Official router for Vue.js 2)
6. vuex 3.0.1 (state management for Vue.js)
7. electron 3.0.0 (Build cross platform desktop apps with JavaScript, HTML, and CSS)
8. electron-packager 12.1.2 (Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI)
9. electron-builder 20.28.4 (A complete solution to package and build a ready for distribution Electron app for MacOS, Windows and Linux with “auto update” support out of the box)
10. @babel/core 7.0.0-beta.54 (Babel compiler core.)
11. webpack 4.19.1 (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
12. webpack-dev-server 3.1.8 (Serves a webpack app. Updates the browser on changes.)
13. workbox-webpack-plugin 3.5.0 (A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)
14. register-service-worker 1.5.2 (Script for registering service worker, with hooks)

What did you get as the error?

Invalid prop: custom validator check failed for prop "letter".
I try to show a dynamic number from an array in QItemSide

What were you expecting?

I did not expect any error

What steps did you take, to get the error?

console electron

Enable strict mode for vuex in development

I suggestion enable strict mode for vuex in 'development'.
Inset code

strict: process.env.NODE_ENV === 'development'

here
Not sure the check process.env.NODE_ENV is best solution.

readme has incorrect quasar create

Describe the bug
Given that this is a started kit I believe that the readme should show the command as quasar create -kit quasarframework/quasar-starter-kit as this is how a kit should be used. If this is the kit used by default when quasar create runs then this should be noted and explained that -kit can be omitted.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):
OS:
Node:
NPM:
Yarn:
Browsers:
iOS:
Android:
Electron:

Additional context
Add any other context about the problem here.

Setup fails with lint error with airbnb config

Describe the bug
While using Quasar CLI with TypeScript support and AirBnb linting at the end of the setup we are getting error "Do not nest ternary expression" and process fails.

Codepen/jsFiddle/Codesandbox (required)
This is installation issue

To Reproduce

1. Select TypeScript (This might not create problem but I selected it so)
2. Select Airbnb for linting

Expected behavior
Setup should add files without any errors.

Screenshots

Platform (please complete the following information):
Quasar Version:
@quasar/app Version: @quasar/[email protected]
Quasar mode:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: Linux Mint
Node: 12.22.1
NPM: 6.14.12
Yarn: 1.22.5
Browsers:Chrome
iOS:
Android:
Electron:

Additional context
None

`.postcssrc.js` requires `autoprefixer` but it isn't listed as a dependency.

Describe the bug
.postcssrc.js requires autoprefixer but it isn't listed as a dependency in the template package.json

To Reproduce
Steps to reproduce the behavior:

1. npm i -g pnpm
2. pnpm i -g @quasar/cli
3. quasar create quasar-app

? Project name (internal usage for dev) quasar-app
? Project product name (must start with letter if building mobile apps) Quasar App
? Project description A Quasar Framework app
? Pick your favorite CSS preprocessor: (can be changed later) SCSS
? Pick a Quasar components & directives import strategy: (can be changed later) Auto import
? Check the features needed for your project: ESLint, Vuex, Axios, Vue-i18n
? Pick an ESLint preset: Airbnb
? Cordova/Capacitor id (disregard if not building mobile apps) com.noshyaar.quasarapp
? Should we run `npm install` for you after the project has been created? (recommended) no

4. cd quasar-app
5. pnpm i
6. quasar dev

Expected behavior
Running development server

Screenshots
-

Platform (please complete the following information):
OS: Ubuntu 19.10 eoan
Node: v13.0.1
NPM: 6.12.0
Yarn: -
pnpm: 4.9.3
Browsers: Mozilla Firefox 72.0.2
iOS: -
Android: -
Electron: -

Additional context

$ quasar dev

 Dev mode.......... spa
 Pkg quasar........ v1.8.5
 Pkg @quasar/app... v1.5.3
 Debugging......... enabled

 app:quasar-conf Reading quasar.conf.js +0ms
 app:dev Checking listening address availability (0.0.0.0:8080)... +5ms
(node:10728) UnhandledPromiseRejectionWarning:   Error: Cannot find module 'autoprefixer'
  Require stack:
  - /home/noshyaar/git/quasar-app/.postcssrc.js
  - /home/noshyaar/git/quasar-app/node_modules/.pnpm/registry.npmjs.org/@quasar/app/1.5.3/node_modules/@quasar/app/lib/webpack/inject.style-rules.js
  - /home/noshyaar/git/quasar-app/node_modules/.pnpm/registry.npmjs.org/@quasar/app/1.5.3/node_modules/@quasar/app/lib/webpack/create-chain.js
  - /home/noshyaar/git/quasar-app/node_modules/.pnpm/registry.npmjs.org/@quasar/app/1.5.3/node_modules/@quasar/app/lib/webpack/index.js
  - /home/noshyaar/git/quasar-app/node_modules/.pnpm/registry.npmjs.org/@quasar/app/1.5.3/node_modules/@quasar/app/lib/quasar-config.js
  - /home/noshyaar/git/quasar-app/node_modules/.pnpm/registry.npmjs.org/@quasar/app/1.5.3/node_modules/@quasar/app/bin/quasar-dev
  - /home/noshyaar/git/quasar-app/node_modules/.pnpm/registry.npmjs.org/@quasar/app/1.5.3/node_modules/@quasar/app/bin/quasar
  - /home/noshyaar/.nvm/versions/node/v13.0.1/pnpm-global/3/node_modules/.pnpm/registry.npmjs.org/@quasar/cli/1.0.5/node_modules/@quasar/cli/bin/quasar

[PWA] Workbox support

From Google:

Developers who have previously used sw-precache and/or sw-toolbox have a straightforward upgrade path to the Workbox family of libraries. Upgrading to Workbox will provide a modern, extensible service worker experience with improved debugging and developer ergonomics.

Migration guide: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw#from_the_sw-precache-webpack-plugin_to_the_workbox_webpack_plugin

Vue CLI 3 PWA plugin supports workbox: vuejs/vue-cli#717

Questionable recommendations for typescript configuration

Describe the bug

This issue is more of a discussion than a bug.

Recommendations are often useful for people who are unsure about there decision or just don't know what they are doing, and should therefore suggest the "best-practice" choice in some way.

When choosing typescript, this starter kit recommends to use either the composition-api or the class based API. While I do agree that they will probably provide a better typescript experience, I don't think they are reasonable recommended choices. (BTW I am using the composition-api myself)

Composition API

1. It isn't recommended to use this in production. From the README:

We do not recommend using this package for production yet at this stage.

2. This will be an advanced API in Vue 3, and will not be the recommended default API, as stated in the adoption strategy

The API will be positioned as an advanced feature, since the problems it aims to address appear primarily in large scale applications. We do not intend to overhaul the documentation to use it as the default. Instead, it will have its own dedicated section in the docs.

Class based API

This is a community plugin, and I don't know how many people are actually using this, but it is certainly not the majority, which one again does not seem like a good "recommended" choice to me.

Option API

I think this will probably provide the poorest typescript experience (definitely not that bad), but at least it will be inline with Vue's recommendations.

i18n: auto-detect locale

It would be useful and more reasonable to have the app change the i18n translation according to user's browser preferences.

Typescript: Wrong type used in router/index.ts

Hi everybody! First of all, thanks for the awesome work!

I have found a problem with the starter kit here:

quasar-starter-kit/template/src/router/index.ts

Line 11 in 04ffe23

export default route{{#preset.vuex}}<StoreInterface>{{/preset.vuex}}(function ({ Vue }) {

StoreInterface is used as type to the call of the route wrapper.
But the store param is not of type StoreInterface but of Store<StoreInterface> with Store coming from vuex. Without changing {{#preset.vuex}}<StoreInterface>{{/preset.vuex}} to {{#preset.vuex}}<Store<StoreInterface>>{{/preset.vuex}} (and importing Store from vuex) using the store parameter causes errors.

Keep up the good work! Best regards!

Add hreflang tag to index

As adviced on the google search console:
https://www.google.com/webmasters/tools/home

Have the index.html include a hreflang tag upon initialization.

Things that would improve builds

All

• automatically add <base ... /> tag to index.template.html, populated from publicPath

Cordova, Electron

• automatically set mode to 'hash'
• automatically set publicPath to ''
• automatically remove <base ... /> from index.template.html

Cordova

• in case of a feature equivalent to quasar wrap cordova fill cordova/package.json with info for name, displayname, description, version, author and license from base package.json
• in case of a feature equivalent to quasar wrap cordova fill cordova/config.xml with:
  • widget id and version built from package.json name
  • name, description, author from package.json
  • platform android and ios with <icon.. /> as in PWA - here I have a doubt, as platform is added later from cordova - maybe add icon outside of platform as comment to be moved later by user

Icons for Android

<platform name="android">
    <!--
        ldpi    : 36x36 px
        mdpi    : 48x48 px
        hdpi    : 72x72 px
        xhdpi   : 96x96 px
        xxhdpi  : 144x144 px
        xxxhdpi : 192x192 px
    -->
    <icon src="res/android/ldpi.png" density="ldpi" />
    <icon src="res/android/mdpi.png" density="mdpi" />
    <icon src="res/android/hdpi.png" density="hdpi" />
    <icon src="res/android/xhdpi.png" density="xhdpi" />
    <icon src="res/android/xxhdpi.png" density="xxhdpi" />
    <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

Icons for iOS

<platform name="ios">
    <!-- iOS 8.0+ -->
    <!-- iPhone 6 Plus  -->
    <icon src="res/ios/[email protected]" width="180" height="180" />
    <!-- iOS 7.0+ -->
    <!-- iPhone / iPod Touch  -->
    <icon src="res/ios/icon-60.png" width="60" height="60" />
    <icon src="res/ios/[email protected]" width="120" height="120" />
    <!-- iPad -->
    <icon src="res/ios/icon-76.png" width="76" height="76" />
    <icon src="res/ios/[email protected]" width="152" height="152" />
    <!-- Spotlight Icon -->
    <icon src="res/ios/icon-40.png" width="40" height="40" />
    <icon src="res/ios/[email protected]" width="80" height="80" />
    <!-- iOS 6.1 -->
    <!-- iPhone / iPod Touch -->
    <icon src="res/ios/icon.png" width="57" height="57" />
    <icon src="res/ios/[email protected]" width="114" height="114" />
    <!-- iPad -->
    <icon src="res/ios/icon-72.png" width="72" height="72" />
    <icon src="res/ios/[email protected]" width="144" height="144" />
    <!-- iPad Pro -->
    <icon src="res/ios/icon-167.png" width="167" height="167" />
    <!-- iPhone Spotlight and Settings Icon -->
    <icon src="res/ios/icon-small.png" width="29" height="29" />
    <icon src="res/ios/[email protected]" width="58" height="58" />
    <!-- iPad Spotlight and Settings Icon -->
    <icon src="res/ios/icon-50.png" width="50" height="50" />
    <icon src="res/ios/[email protected]" width="100" height="100" />
    <!-- iPad Pro -->
    <icon src="res/ios/[email protected]" width="167" height="167" />
</platform>

Confusing text in comment in router/index.js

I found the comment in src/router/index.js instructing to set the Vue Router mode in quasar.conf.js a bit confusing because 'history' mode is set by default in the starter kit. When reading the comment it sounds like the default is something else, because it asks the user to also change a different setting (build.publicPath) if "history" mode is chosen.

This is a small thing, but upgrading from q0.14 I didn't notice at first that the default mode was "history" mode and took me a while to catch that.

Thanks for the great work!
Omri

Package exports for @babel/helper-compilation-targets do not define a '.' subpath

To Reproduce
Steps to reproduce the behavior:

1. quasar create quasar-test
2. Complete the wizard
3. quasar dev
4. See error

Quasar info
Operating System - Darwin(19.2.0) - darwin/x64
NodeJs - 13.1.0

Global packages
NPM - 6.13.6
yarn - Not installed
@quasar/cli - 1.0.5
cordova - Not installed

Important local packages
quasar - 1.7.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app - 1.5.1 -- Quasar Framework local CLI
@quasar/extras - 1.4.2 -- Quasar Framework fonts, icons and animations
vue - 2.6.11 -- Reactive, component-oriented view layer for modern web interfaces.
vue-router - 3.1.3 -- Official router for Vue.js 2
vuex - 3.1.2 -- state management for Vue.js
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
@babel/core - 7.8.3 -- Babel compiler core.
webpack - 4.41.5 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
webpack-dev-server - 3.10.1 -- Serves a webpack app. Updates the browser on changes.
workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
None installed

Log
Dev mode.......... spa
Pkg quasar........ v1.7.3
Pkg @quasar/app... v1.5.1
Debugging......... enabled

app:quasar-conf Reading quasar.conf.js +0ms
app:dev Checking listening address availability (0.0.0.0:8080)... +9ms
app:webpack Extending SPA Webpack config +9s
app:generator Generating Webpack entry point +58ms
app:dev-server Booting up... +31ms

SPA █████████████████████████ [100%] in ~8s

ERROR Failed to compile with 1 errors 16:21:52

error in /quasar-test/.quasar/client-entry.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /quasar-test/.quasar/client-entry.js: Package exports for '/quasar-test/node_modules/@quasar/babel-preset-app/node_modules/@babel/helper-compilation-targ
ets' do not define a '.' subpath (While processing: "/quasar-test/node_modules/@quasar/babel-preset-app/index.js")

• loader.js:485 applyExports
  internal/modules/cjs/loader.js:485:15

• loader.js:508 resolveExports
  internal/modules/cjs/loader.js:508:12

• loader.js:577 Function.Module._findPath
  internal/modules/cjs/loader.js:577:20

• loader.js:879 Function.Module._resolveFilename
  internal/modules/cjs/loader.js:879:27

• loader.js:785 Function.Module._load
  internal/modules/cjs/loader.js:785:27

• loader.js:956 Module.require
  internal/modules/cjs/loader.js:956:19

• helpers.js:74 require
  internal/modules/cjs/helpers.js:74:18

• debug.js:8 Object.
  [quasar-test]/[babel-preset-app]/[@babel]/preset-env/lib/debug.js:8:33

• loader.js:1063 Module._compile
  internal/modules/cjs/loader.js:1063:30

• loader.js:1103 Object.Module._extensions..js
  internal/modules/cjs/loader.js:1103:10

@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js /quasar-test/.quasar/client-entry.js

** Note **
quasar-starter-kit works fine with quasar 1.6.1

[Feature] Add Modes directly in the Starter Kit

I think that this would be an enhancement from the POV of quickly scaffolding a complete new project that automatically sets everything up in one go.

This is merely a nice to have.

Cordova mode needs cordova-cli in template package.json

Cordova mode needs cordova-cli in template package.json, at least on windows.
It's not using the globally installed one.

Create version command

• trebuie incarcate package.json de la o serie de pachete si afisat versiunile alea
• o functie care sa citeasca versiunea unui pachet, rulata intr-un loop pt mai multe pachete
• calea e data de appPaths.resolve.app('node_modules/PACHET/package.json)
• plus afisat versiunea de node, npm, si pachetul de build, apoi OS-ul (require('os')...)

Eslint plugin Vue 5 released

Today has been released the new stable version on eslint plug-in for Vue:
https://github.com/vuejs/eslint-plugin-vue
Could someone to update and test it?
Cheers,
Francesco

[Feature] Allow user to APPLY / SAVE a commonly used init

Probably only useful for "power users", the APPLY feature would hook after the name and description of the new quasar project is defined. The SAVE feature would be :after a successful build where the user is asked if they would like to save this init as a template. I can envision cases where the user would also be able to edit / version their template with other things like adding extra plugins etc.

Quasar Create Issue in Windows

Describe the bug
As per Instruction i installed quasar and tried to created my first app and it gives an error

To Reproduce
Steps to reproduce the behavior:

1. Install Quasar using

npm install -g @quasar/cli

2. It Installs and even show info

$ quasar info
Operating System        Windows_NT(10.0.17134) - win32/x64
NodeJs                  12.13.0
Global packages
  NPM                   6.12.0
  yarn                  Not installed
  @quasar/cli           1.1.0
  cordova               Not installed

3. Now I try to create my first app and bug comes up

quasar create www

  ___
 / _ \ _   _  __ _ ___  __ _ _ __
| | | | | | |/ _` / __|/ _` | '__|
| |_| | |_| | (_| \__ \ (_| | |
 \__\_\\__,_|\__,_|___/\__,_|_|



-  Downloading Quasar starter kit
  Quasar CLI · Failed to download repo quasarframework/quasar-starter-kit#master: unable to get local issuer certificate

4. See error
   Quasar CLI · Failed to download repo quasarframework/quasar-starter-kit#master: unable to get local issuer certificate

Expected behavior
Things should have worked as per online guide

Screenshots
cli trace given above

Platform (please complete the following information):
OS: Windows 10
Node: 12.13
NPM:6.12
Yarn:nope
Browsers:Chrome
iOS:nope
Android:nope
Electron:nope

Additional context
As a complete Newbie , I should see this!

`quasar dev` fails on a new, clean project

Describe the bug
When I create a new quasar project, cd to project directory and run quasar dev I get an error

To Reproduce
Steps to reproduce the behavior:

1. run `yarn global add @quasar/cli
2. run quasar create project_name
   I choose Typescript, Eslint, Prettier, SCSS, Vuex, Axios and Composition API
3. cd project_name
4. quasar dev
5. Error

Expected behavior
It should work, especially on a clean project

Screenshots
I guess I'll put the log here:

[user@user-laptop example-project]$ quasar dev

 Dev mode.......... spa
 Pkg quasar........ v2.0.3
 Pkg @quasar/app... v3.0.3
 Pkg webpack....... v5
 Debugging......... enabled

 Configured browser support (>= 88.27% of global marketshare):
 · Chrome for Android >= 92
 · Firefox for Android >= 90
 · Android >= 92
 · Chrome >= 83
 · Edge >= 89
 · Firefox >= 81
 · iOS >= 11.0-11.2
 · Opera >= 73
 · Safari >= 11.1

(node:6700) UnhandledPromiseRejectionWarning:   Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
  Require stack:
  - /home/user/example-project/node_modules/vue-loader/dist/pluginWebpack5.js
  - /home/user/example-project/node_modules/vue-loader/dist/plugin.js
  - /home/user/example-project/node_modules/vue-loader/dist/index.js
  - /home/user/example-project/node_modules/@quasar/app/lib/webpack/create-chain.js
  - /home/user/example-project/node_modules/@quasar/app/lib/webpack/index.js
  - /home/user/example-project/node_modules/@quasar/app/lib/quasar-conf-file.js
  - /home/user/example-project/node_modules/@quasar/app/bin/quasar-dev
  - /home/user/example-project/node_modules/@quasar/app/bin/quasar
  - /home/user/.config/yarn/global/node_modules/@quasar/cli/bin/quasar
  
  - loader.js:902 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:902:15
  
  - loader.js:746 Function.Module._load
    internal/modules/cjs/loader.js:746:27
  
  - loader.js:974 Module.require
    internal/modules/cjs/loader.js:974:19
  
  - helpers.js:92 require
    internal/modules/cjs/helpers.js:92:18
  
  - pluginWebpack5.js:9 Object.<anonymous>
    [example-project]/[vue-loader]/dist/pluginWebpack5.js:9:42
  
  - loader.js:1085 Module._compile
    internal/modules/cjs/loader.js:1085:14
  
  - loader.js:1114 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1114:10
  
  - loader.js:950 Module.load
    internal/modules/cjs/loader.js:950:32
  
  - loader.js:790 Function.Module._load
    internal/modules/cjs/loader.js:790:14
  
  - loader.js:974 Module.require
    internal/modules/cjs/loader.js:974:19
  

(Use `node --trace-warnings ...` to show where the warning was created)
(node:6700) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:6700) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Platform (please complete the following information):
OS: Manjaro Linux, latest updates installed
Node: v14.17.3
NPM: 7.20.2
Yarn: 1.22.11
Browsers: -
iOS: -
Android: -
Electron: -

Additional context
I have successfully created a project a few weeks ago and everything was working then

Vue Class Component - Project Inactivity and HMR Failure

I don't think the option should be removed, however I think a warning or something should be added beside the prompt

quasar-starter-kit/meta.js

Line 96 in 7cf4e7d

'Class-based (https://github.com/vuejs/vue-class-component & https://github.com/kaorun343/vue-property-decorator)',

Even if it just looks like:

Class-based (https://github.com/vuejs/vue-class-component & https://github.com/kaorun343/vue-property-decorator) NOTE: HMR does not function correctly with class-based projects.

Or maybe just a new prompt as a whole to acknowledge the potential issue. It seems this bug has existed for months (reported initially in February on Quasar, then issues open on vue-class-component in late March) without acknowledgement from the devs.

For reference:
vuejs/vue-class-component#521
quasarframework/quasar#10527
quasarframework/quasar#8534

Eslint throws errors on create -b dev with Prettier

Using these options:

? Check the features needed for your project: ESLint, Vuex, Axios
? Pick an ESLint preset Prettier

And both yarn and NPM

Throws these errors:

error  'context' is defined but never used  no-unused-vars
error  'state' is defined but never used  no-unused-vars
error  'state' is defined but never used  no-unused-vars

ESLint Standard - PropType not found in ‘vue‘ (and other types)

Describe the bug
just created a brand new quasar v2 project (SCSS, TypeScript, ESLint Standard, Axios, Composition API) enabled. however, quasar CLI always shows some strange eslint errors (see screenshot).

the issue only occurs when ESLint Standard is selected on "quasar create". no problems with ESLint Prettier...

additional info & screenshots provided in discord:
https://discord.com/channels/415874313728688138/807654245640962059/874670423890096168
https://discord.com/channels/415874313728688138/807654245640962059/874674923153555498

To Reproduce
Steps to reproduce the behavior:

1. run „quasar create testproj“ with options: SCSS, TypeScript, ESLint Standard, Axios, Composition API
2. Quasar CLI does its magic…
3. …final eslint step fails with errors (see screenshots in discord, links above) when ESLint Standard is selected (however, no issue if ESLint Prettier was selected)

Expected behavior
Quasar CLI completes without errors

Screenshots

Platform (please complete the following information):
OS: Windows 10
Node: 14.17.4
NPM: 7.19.1
Yarn: 1.22.5
Browsers: -
iOS: -
Android: -
Electron: -

Additional context
Add any other context about the problem here.

Service worker not being added to production.

I noticed that my service worker wasn't refreshing to the new one any more.
When checking dist/pwa-ios I can't find any of my service worker code inside the service-worker.js file.

In my service-worker-prod.js I have:

            installingWorker.onstatechange = function () {
              switch (installingWorker.state) {
                case 'installed':
                  // At this point, the old content will have been purged and the
                  // fresh content will have been added to the cache.
                  // It's the perfect time to display a "New content is
                  // available; please refresh." message in the page's interface.
                  if (!window.QNotify) {
                    window.location.reload()
                    break;
                  }
                  window.QNotify({
                    message: window.store.getters.text.global.newVersionAvailable,
                    timeout: 10000,
                    type: 'info',
                    actions: [{
                      label: window.store.getters.text.global.refresh,
                      handler: function () { window.location.reload() }
                    }]
                  })
                  break;

This code is not added to the dist service-worker it seems... (I searched for QNotify and reload() etc.)

This code however, is critical to always have the latest version for my users.

PS: is there any better way to write the "please reload page" code?

SSR + vue-i18n starter kit issue (memory leak)

Describe the bug
nodejs server can not release memory after http request end.it cause server's memory less and less, finally nodejs used up the server's memory and the server is down.

Codepen/jsFiddle/Codesandbox (required)
Fork a Codepen (https://codepen.quasar.dev) or a jsFiddle (https://jsfiddle.quasar.dev) or a Codesandbox (https://codesandbox.quasar.dev) and hit save then copy-paste link here.

To Reproduce
Steps to reproduce the behavior:

1. quasar create app xxx
2. quasar mode add ssr
3. quaasr build -m ssr
4. node index.js or pm2 start index.js
5. monit the node server
6. user webbwnch to make a large number of requests
7. Memory growth very quickly
8. after all requests ends, memory can not been released until the server is down.
9. dump the memery shapshot
10. Analysis the memory shapshot

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):
Quasar Version:
@quasar/app Version:

Quasar mode:

• SPA
• [x ] SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• [x ] SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: linux, windows
Node: v14
NPM: 6.13
Yarn:1.22
Browsers:
iOS:
Android:
Electron:

Additional context
Add any other context about the problem here.