quasarframework / quasar-starter-kit Goto Github PK
View Code? Open in Web Editor NEWQuasar CLI Starter Kit
Home Page: https://quasar.dev
License: MIT License
Quasar CLI Starter Kit
Home Page: https://quasar.dev
License: MIT License
To Reproduce
Steps to reproduce the behavior:
quasar create quasar-test
quasar dev
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
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:
Expected behavior
Quasar CLI completes without errors
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.
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
Expected behavior
Setup should add files without any errors.
Platform (please complete the following information):
Quasar Version:
@quasar/app Version: @quasar/[email protected]
Quasar mode:
Tested on:
OS: Linux Mint
Node: 12.22.1
NPM: 6.14.12
Yarn: 1.22.5
Browsers:Chrome
iOS:
Android:
Electron:
Additional context
None
Cordova mode needs cordova-cli in template package.json, at least on windows.
It's not using the globally installed one.
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:
quasar create project_name
cd project_name
quasar dev
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
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
Hi everybody! First of all, thanks for the awesome work!
I have found a problem with the starter kit here:
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!
I don't think the option should be removed, however I think a warning or something should be added beside the prompt
Line 96 in 7cf4e7d
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
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:
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.
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
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;
});
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)
We do not recommend using this package for production yet at this stage.
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.
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.
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.
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
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 wrap cordova
fill cordova/package.json with info for name, displayname, description, version, author and license from base package.jsonquasar wrap cordova
fill cordova/config.xml with:
<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>
<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>
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:
npm install -g @quasar/cli
$ 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
quasar create www
___
/ _ \ _ _ __ _ ___ __ _ _ __
| | | | | | |/ _` / __|/ _` | '__|
| |_| | |_| | (_| \__ \ (_| | |
\__\_\\__,_|\__,_|___/\__,_|_|
- Downloading Quasar starter kit
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!
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:
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:
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.
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
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 .
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
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:
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
.
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.
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:
quasar init mypackage
quasar-cli
quasar-cli
adds the mypackage/test
folder, installs the base @quasar-test/base
repo@quasar-test/ava
, @quasar-test/cypress
, @quasar-test/lighthouse
)mypackage/test
folder.mypackage/package.json
is updated with configs for the test runners.mypackage/package.json
, so that the user can run tests with yarn/npm.mypackage/quasar.conf.js
mypackage/.babelrc
is updated accordinglyquasar mode
:The monorepo is under construction here:
Test runners currently verified to have valid "integration" at the moment are checked off in the following list:
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
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.
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:
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:
Tested on:
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.
Quasar: 0.15.1
OS: Manjaro Linux
Node: 9.5.0
Linter throws a no unusded vars erro
No errors from the linter in the starter kit
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.
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?
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.0eslint-plugin-import
-> 2.25.1eslint-config-prettier
-> 8.3.0@typescript-eslint/*
-> 5.2.0Support 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)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]
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)
page to load OK without errors
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.
Any help appreciated.
Rgds
Mike
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.
<q-item
clickable
tag="a"
target="_blank"
:href="link"
>
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.
As adviced on the google search console:
https://www.google.com/webmasters/tools/home
Have the index.html include a hreflang
tag upon initialization.
It would be useful and more reasonable to have the app change the i18n translation according to user's browser preferences.
NPM 6.4.1
yarn Not installed
quasar-cli 0.17.19
vue-cli 2.9.6
cordova 8.0.0
Invalid prop: custom validator check failed for prop "letter".
I try to show a dynamic number from an array in QItemSide
I did not expect any error
console electron
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:
npm i -g pnpm
pnpm i -g @quasar/cli
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
cd quasar-app
pnpm i
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
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.
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
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
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:
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
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
// boot/CompositionAPI
import VueCompositionApi from '@vue/composition-api';
import { boot } from 'quasar/wrappers';
export default boot(({ Vue }) => {
Vue.use(VueCompositionApi);
});
// 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,
}
}
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
})
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
// services/vue/CompositionApi.ts
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
// /router/index.ts
import 'src/services/vue/CompositionApi'
import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import routes from './routes'
Quasar:
OS:
Node:
NPM:
Browsers:
iOS:
Android:
Any other software related to your bug:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.