quasarframework / quasar-template-default

[DEPRECATED] Quasar App Boilerplate / Starter kit

Quasar Framework Default App Template

Default Starter Kit for a Quasar Framework Project. Compatible with Quasar v0.9-v0.14

DEPRECATED FOR v0.15+

Usage

Use Quasar CLI to generate a new project using this template:

# install Quasar CLI if you don't have it already
$ npm install -g quasar-cli

# generate a project folder with this template
$ quasar init my-project

$ cd my-project
$ npm install
$ quasar dev

Quasar Framework

Build responsive websites, PWAs, hybrid mobile Apps (that look native!) and Electron apps using same code, 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. If you'd like to join them, check out Quasar Framework's Patreon campaign.

Documentation

Head on to the Quasar Framework official website: http://quasar-framework.org

Community Forum

Head on to the official community forum: http://forum.quasar-framework.org

Quasar Repositories

• Quasar Framework
• Quasar CLI
• Quasar Play App

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.

Read more here.

Quasar Play App

Instead of using mobile emulators for testing your Quasar Apps, use this App instead. You can develop apps directly on your phone/tablet (hot reload supported!), without even installing your app.

Currently only on Google Play. Requiring funding to pay fees on Apple Store and release the iOS counterpart too.

Check its repo here: Quasar Play.

License

Copyright (c) 2016-2017 Razvan Stoenescu

MIT License

quasar-template-default's Issues

Only copy file that changed from /statics

Referencing http://forum.quasar-framework.org/topic/334/quasar-build-file-timestamps

eslint Standard now applies an 'import' rule that conflicts with Main.js import order

Eslint's Standard config applies the eslint-import validator which has a rule for imports where you should have your import statements above require statements, that conflicted with my main.js where the style require is above quasar's. I resolved this by adding:

    'import/first': 0

to my .eslintrc.js file
Should I PR this, or has this occurred only on my end?

Allow dots in webpack server in Quasar v15+

Software version

Quasar: 16
OS: MacOS
Node: v9.4.0
NPM: 6.1.0
Browsers: Chrome / ALL
iOS: -
Android: -
Any other software related to your bug:

What did you get as the error?

With the abstraction of webpack config's into quasar.conf.js, there is no option to add webpack rules to disableDotRule for the history fallback, this makes it unable to use certain params (such as JWT tokens or e-mailadresses (encoded)) as params.

What were you expecting?

I'm expecting a file to be available to add the following snippet:

app.use(require('connect-history-api-fallback')({
  disableDotRule: true,
  rewrites: [
    {from: /\/app.js/, to: '/app.js'}
  ]
}))

What steps did you take, to get the error?

I tried to apply above script in quasar.conf.js but there is currently no way to get this working.

IE Edge does not support vmax as font unit size

Software version

Quasar: 0.14 beta
OS: windows 10
Node: 8.1.3
NPM: 5.0.4
Browsers: IE Edge
iOS:
Android:
Any other software related to your bug:

What did you get as the error?

Wrong font size for "404" text on Error404 page

What were you expecting?

What steps did you take, to get the error?

Started with a new project using the default template.
Navigated to an unknow url.
On IE Edge the "404" text in the Error404 component is displayed in the default font size.

As a workaround I've changed the style in the Error404.vue file to this for the fontsize :

@media (orientation: landscape) { 
  font-size 30vw
}
@media (orientation: portrait) { 
  font-size 30vh
}

This seems to work.

optimize build times using happypack

moved from quasarframework/quasar#612

unknow error:TypeError: Cannot set property 'isRootInsert' of undefined

mac, node v7.2.1, npm v3.10
i run the following code

$ quasar init tet
$ cd test
$ npm i
$ quasar dev

but the error happened

TypeError: Cannot set property 'isRootInsert' of undefined
    at createElm (eval at <anonymous> (app.js:794), <anonymous>:4057:24)
    at createChildren (eval at <anonymous> (app.js:794), <anonymous>:4166:9)
    at createElm (eval at <anonymous> (app.js:794), <anonymous>:4091:9)
    at createChildren (eval at <anonymous> (app.js:794), <anonymous>:4166:9)
    at createElm (eval at <anonymous> (app.js:794), <anonymous>:4091:9)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:794), <anonymous>:4509:7)
    at VueComponent.Vue._update (eval at <anonymous> (app.js:794), <anonymous>:2483:19)
    at VueComponent.eval (eval at <anonymous> (app.js:794), <anonymous>:2457:10)
    at Watcher.get (eval at <anonymous> (app.js:794), <anonymous>:1661:27)
    at new Watcher (eval at <anonymous> (app.js:794), <anonymous>:1653:12)

i don't know why it happened

[Request] quasar build to build inside a specified location

If a quasar app is located inside a back end set up, we sometimes want the quasar build command to save the app in a separate location outside of the quasar folder.

In my case quasar lives in my Laravel directory: laravelwebsite/resources/apps/quasarapp
And I would like the quasar build command to also save my app into: laravelwebsite/public/ without messing with the Laravel index.php.

So my request is a simple config file inside the quasar folder where you can set the folder you want to build your app in and with what appname.html you want to build it with.

In my case, I need it to be built as quasarapp.html using the name of my quasar-app inside the Laravel public folder.

For reference, I have set up my Laravel route like so:

// set up the route:
Route::domain('quasarapp'.env('SESSION_DOMAIN')) // e.g. choose a subdomain
	->get('/', 'ViewController@quasarapp')
	->name('quasarapp.index');

// set up the view controller:
public function quasarapp()
{
    return \File::get(public_path() . '/quasarapp.html');
}

Switch to babel-preset-env

Replace babel-preset-es2015/stage/... to babel-preset-env.

More info at:

http://babeljs.io/env

_h is not defined

I have recently switched my Vue SPA, it worked fine till morning and suddenly I see error.
ReferenceError: _h is not defined

if I remove Quasar from main.js, it works but if I include Quasar, it throws me error. Any help would be highly appreciated.

Hot-reload issue

Referecing quasarframework/quasar#312

Getting error when starting with quasar for first time

I just updated quasar-cli, and ran the three commands as mentioned in getting started section.

quasar init default app_name
cd app_name
npm install
quasar dev

localhost:8080 opens, but unfortunately, it says Cannot GET /

and console reads

error  in ./src/App.vue
Syntax Error: Unexpected token {
@ ./src/main.js 23:15-31
@ multi ./build/hot-reload.js ./src/main.js

I neither opened the editor nor edited any file. So this should be an issue from starter kit.

vue 2.3.4
quasar-framework 0.14.4

[Request] - TypeScript - Integrate linting into vue-loader

Feature request

Would it be possible to incorporate the ts-loader & tslint-loader into the vue-loader for the quasar typescript template?
I'm relatively new to webpack and still actively learning but I managed to create my own template for the TypeScript library Vuety. If my understanding is correct, all I did was switch vue-class-component for vuety thus I'd imagine this working for both. In the template, I managed to add linting for single file '.vue' files, such that when the user compiles the component, it provides linting in the console. This will allow users to create single file '.vue' files without the need to have a '*.ts' file imported into each component.
Screenshot examples:
Screenshot of App.vue (Notice: import HelloComponent from './components/Hello.vue')

Screenshot of console running in dev, providing linting warnings/errors.

An argument can be made that developing in the '.ts' file provides real-time linting which is far more beneficial but I guess it's down to personal taste?
I have attempted to add both loaders to the webpack.base.config.js but to no avail, resulting in many errors/issues thus I am unsure how to integrate the loaders into the existing template.
What mine look's like:

What the template's look's like:

EDIT: Example of what I attempted

Window shows scrollbars in chrome

Hi,

when I create a quasar app with:

quasar init folder
cd folder
npm install
npm run dev

It shows scrollbars in Chrome, it does not when using Firefox.
When I resize the Chrome-window just by a pixel the scrollbars disappear and reappear on reload.

I just tried with MS Windows.

Do you have any idea how I could fix this behaviour?

Thank you very much
Regards
Seyhbold

'load' function in routes.js makes code splits for webpack

The ‘load’ function which is used in the template routes.js:
https://github.com/quasarframework/app-template-default/blob/master/template/src/router.js
does have consequences for the build chunks. Is this intended?

It makes a code split for webpack. See also:
https://forum.vuejs.org/t/duplicate-webpack-chunks/5572

Maybe explain in the code how to use it or something.

Fresh cordova app leaves white gap above header in iOs simultor

Steps to reproduce:

quasar init default Qtest
cd Qtest
yarn install
quasar build
quasar wrap cordova
cd cordova
cordova platform add ios
cordova run ios

results in:

CSS import order different for "quasar dev" and "quasar build"

I am having issues with the css import order when building the default app; Specifically material-icons.css has precedence over quasar-mat-css after building, but it's the other way around in dev mode.

I found similar report on the forum: http://forum.quasar-framework.org/topic/989/the-compact-css-generated-with-quasar-build-mat-quasar-does-not-match-to-the-quasar-mat-css-in-dev-environment

To reproduce:
quasar init and add a <q-fab color="primary" icon="add" direction="left"></q-fab> to the template.

Icon is centred after viewing with quasar dev, but after building with quasar build the icon is shifted up. Inspection of the generated css shows that the order for dev and build is different: 'material-icons.css' has precedence over 'quasar-mat-css' in build mode

Also switching off purifyCss doesn't help.

I have added a a repo demonstrating the issue here: https://github.com/tdamsma/quasar-css-import-bug

How to install and config Karma and mocha to project created by quasar framework?

Software version

I created a project by quasar cli V0.14.9. Now how do i ? in order to write a class unit test for a componmnet? i dont know config? Can you suggest me to write a unit test for a quasar cli project.

What did you get as the error?

What were you expecting?

What steps did you take, to get the error?

Default template make app lag badly on firefox mobile

Software version

Quasar: 0.6.4
OS: ArchLinux
Node: 9.2.0
NPM: 5.6.0
Browsers:
iOS:
Android: Firefox Mobile (latest nightly as of 2017-12-06 and 57.0.1)
Any other software related to your bug:

What did you get as the error?

Trying to load the default project on Firefox mobile

What were you expecting?

Fast loading and working app, as in every other browser (Safari on Ipad, Default android web browser, Firefox desktop, Chromium desktop all work normally)

What steps did you take, to get the error?

Just a simple quasar init default, quasar build then pushed that on a (fast) server

How did I solved the issue

Removing the script that orients and move the logo in the back make everything works perfectly again. So I guess there is something wrong with it on Firefox mobile. I did run the firefox webIDE to connect to my phone, there is no error nor any warning in the console.

'.bold' has bugs under some consoles

Referencing quasarframework/quasar#448

Quasar is not working when run "quasar dev" with error [email protected] dev: `node build/script.dev.js`

Dear All

Firstly, thanks for the creator and all contributors for this great Framework

This is my first time to install quasar but I got below error message, could you please advise.

Below are software versions.

Quasar: ^0.14.4
OS: Windows 7
node: V6.11.2
npm: v5.5.1
"vue": "^2.5.0",
"vue-router": "^3.0.1"

After installed Quasar

• I run "quasar dev" but nothing happened.
• then I run "npm run dev" and got below error message.

And below are the error message from the log file

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\Vongsi\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]predev: [email protected]
6 info lifecycle [email protected]dev: [email protected]
7 verbose lifecycle [email protected]dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]dev: PATH: C:\Users\Vongsi\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;D:\wamp64\www\quasar_using\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files\WIDCOMM\Bluetooth Software;C:\Program Files\WIDCOMM\Bluetooth Software\syswow64;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\ManagementStudio;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files\dotnet;D:\wamp64\bin\php\php7.0.10;C:\ProgramData\ComposerSetup\bin;C:\Program Files (x86)\Skype\Phone;C:\Program Files\nodejs;C:\Program Files\PuTTY;C:\Program Files (x86)\Brackets\command;C:\Program Files\Git\cmd;C:\Windows\System32;C:\Users\Vongsi\AppData\Roaming\Composer\vendor\bin;C:\Users\Vongsi\AppData\Roaming\npm;C:\Users\Vongsi\AppData\Local\GitHubDesktop\bin;C:\Program Files\Microsoft VS Code\bin
9 verbose lifecycle [email protected]dev: CWD: D:\wamp64\www\quasar_using
10 silly lifecycle [email protected]dev: Args: [ '/d /s /c', 'node build/script.dev.js' ]
11 silly lifecycle [email protected]dev: Returned: code: 1 signal: null
12 info lifecycle [email protected]dev: Failed to exec dev script
13 verbose stack Error: [email protected] dev: node build/script.dev.js
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Users\Vongsi\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:280:16)
13 verbose stack at emitTwo (events.js:106:13)
13 verbose stack at EventEmitter.emit (events.js:191:7)
13 verbose stack at ChildProcess. (C:\Users\Vongsi\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at emitTwo (events.js:106:13)
13 verbose stack at ChildProcess.emit (events.js:191:7)
13 verbose stack at maybeClose (internal/child_process.js:891:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\wamp64\www\quasar_using
16 verbose Windows_NT 6.1.7601
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\Vongsi\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "dev"
18 verbose node v6.11.2
19 verbose npm v5.5.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: node build/script.dev.js
22 error Exit status 1
23 error Failed at the [email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Appreciated for your advise and help.

Feature request: unit & e2e test config.

This a feature request. It used to be included in quasar (like the vue boilerplate). As I remember it, it used to work for my setup, but somehow probably because of npm package updates I now get all kinds of errors which I can not seem to get rid of.

Grouping Components in the Same Chunk

Hi
I have problem grouping components in the same chunk by using the lazy loading from https://router.vuejs.org/en/advanced/lazy-loading.html. I believe it is something about the builder, but cannot find the problem. It does not work when using children. The URL shows up, but the content doesn't.

Ex.

File: routes.js

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')

const routes = new VueRouter({
// WORKING EXAMPLE
  {
    path: '/',
    component: Foo
  },
// NOT WORKING EXAMPLE
  {
    path: '/',
    component: Foo,
    children: [
      {
        path: 'test',
        component: Bar
      }
    ]
  },
]

Any suggestions?

//Rasmus

In the Dev-server accept . (dots) in the URL for a specific routes

Software version

Quasar: 0.14.4
OS: Linux Mint 18.2
Node: v8.9.1
NPM: 5.5.1
Browsers: Google Chrome Version 62.0.3202.94 (Official Build) (64-bit)
iOS:
Android:
Any other software related to your bug:

What did you get as the error?

Cannot GET /reset-password/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OWE2MDI2MWEwOGFjMjM5NzE1YzU4YjYiLCJhY2Nlc3MiOiJmb3Jnb3RQYXNzd29yZCIsImlhdCI6MTUxMDc4ODU0NSwiZXhwIjoxNTEwODE3MzQ1fQ.sp4cc7K4KYocClZ652R47nAfU7pmuY-LPfpMA_gIpvM

What were you expecting?

I expect to be able to set some roles for the dev server to allow the dots in the URL for specific routes. I use JWT in the reset password URL that sends to the user's email address and the confirmation email message.

What steps did you take, to get the error?

Just take the URL put it in the browser address bar and hit enter(here I'm talking about the dev server http://localhost:8080).

What I'm doing in my other Vue projects is putting this:

// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')({
  // disableDotRule: true,
  // verbose: true,
  rewrites: [
      {
          from: /^\/reset-password\/.*$/,
          to: '/'
      }
  ]
}))

In build/dev-server.js file but I was not able to find this file in the build folder.

Why Root component doesn't wraps all components?

Hello, I can't set data in root component. The root component doesn't wraps all components.

there is main.js

Vue.use(Quasar) // Install Quasar Framework

Quasar.start(() => {
  /* eslint-disable no-new */
  new Vue({
    el: '#q-app',
    data () {
      return {name: 'ali'}
    },
    router,
    render: h => h(require('./App'))
  })
})

there is ss

Property or method "_c" is not defined

Getting alot of these warnings:

vue.runtime.common.js?d43f:509[Vue warn]: Property or method "_c" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in anonymous component at /home/user/workspace/quasar-app/src/App.vue)

Seems to happen once for every vue component that is being rendered.

Not really a breaking bug since everything seems to work fine but should probably be fixed.