quasarframework/quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time

Quasar Framework

Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

Please submit a PR to https://github.com/quasarframework/quasar-awesome with your website/app/Quasar tutorial/video etc. Thank you!

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.

Proudly sponsored by:

Documentation

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

Stay in Touch

For latest releases and announcements, follow us on our Twitter account: @quasarframework

Chat Support

Ask questions at the official community Discord server: https://chat.quasar.dev

Community Forum

Ask questions at the official community forum: https://forum.quasar.dev

Contributing

Please make sure to read the Contributing Guide before making a pull request. If you have a Quasar-related project/component/tool, add it with a pull request to this curated list!

Thank you to all the people who already contributed to Quasar!

Semver

Quasar is following Semantic Versioning 2.0.

License

Copyright (c) 2015-present Razvan Stoenescu

MIT License

quasar's Issues

How to preview ios and android version of the app in browser?

Is there a way to display the appearance of the app on both platforms in browser?

Drawer "sliding area" is not large enough

The sliding area in which user can slide for opening the drawer is not large enough. In fact, with the Chrome mobile view (devtools), we have to reach the limit of the screen to make the drawer appear, with a very little marge of 1/5 px. For example, with the cursor placed here (see screenshot below), the sliding is not possible. Not tested with other devices, but I think there are issues too.

Make Crosswalk Optional

Can I remove crosswalk from cordova?

I know that removing crosswalk may cause apps not working on older device. But there might be other consideration such as making smaller footprint by removing crosswalk.

Polished Toolbars

Let's improve Toolbars!
Scrolling should affect Toolbar height/position.

Can be configured in multiple ways when user scrolls the page view:

• Slides up gradually as user scroll down and slides down completely through animation when user scrolls up.
• Material theme only: navigational tabs slide up and down only, like in previous case.

The mobile demo view in Quasar documentation is truncated

In Quasar documentation, the mobile demo view on the right of each page is truncated on my screen (1280 * 1024 px). I have to zoom out (90%) to reach the "View source" and "Desktop view" buttons.
This behaviour was not present a week or two ago when I discovered Quasar.

Example apps

Do you have any production apps using the framework? Any example from real world apps would be great.

Anyway amazing job you did here.

Name coincidence

Hello, I have been developing a personal framework for about 5 years now and I am considering to share it and make it public, however it has come to my attention that, unfortunately, your framework shares the same name as mine. I am writing this issue in order to find out if it would be a problem for you and supposedly to find a solution to the problem. Thank you for your attention and if no response is given I will assume that everything is alright.

Electron starter kit

Hi there,

Before, I want to say that you did an amazing job with Quasar Framework 👍

Do you plan to add the support of Electron to develop desktop applications in the future?

Thank you

Polished Stepper

Let's improve the Stepper!

• "Next" button should be labeled as "Continue"
• Uncompleted steps' number icon should be grayed out
• Completed steps' number icon should be replaced by a check mark

Include quasar sources in npm packages

It would be a good thing to include all the repo files in the npm published package.

Use case : override Quasar components, for example for override the dropdown component :

MyCustomDropdown.vue (redefines the Quasar dropdown component but inherits the same mixin :

<template>

<div class="quasar-dropdown">
    <div class="quasar-dropdown-target" @click="toggle">
        <slot name="target"></slot>
    </div>
    <div v-el:menu class="quasar-dropdown-menu" style="display: none;">
        <slot></slot>
    </div>
</div>

</template>

<script>

import vm from 'quasar-framework/src/vue-components/dropdown/dropdown-common.js'
export default {
    mixins: [vm],
    destroy() {
        document.body.removeEventListener('mousedown', this.close)
    },
    methods: {
        open(event) {
            console.log('open')
        },
        mycustommethod() {

        }
    }
}

</script>

Several open source projects do it, including vue, vue-router, vue-i18n, etc.

Displaying Material Icons with longer names

When icons have names with multiple words, it almost never works on Cordova. Either they are not displayed at all or more than one icon is shown (wrong ones in any case)

Example. This one doesn't show up on Cordova:

vertical_align_bottom

Example. This one show 2 icons (power and settings) on cordova disrupting the grid:

    <i>power_settings_new</i>

---

Generally they work on desktop (Chrome and Firefox). I found the following not working with browsers though:

star_rate

Star icon is shown but Page Title is not aligned as the second word of the icon seems to take some space.

Window width related CSS classes doesn't work for some components

Window width related CSS classes works by first setting "display:none" for all those classes and then display each of them depending of the window width (with media-query CSS). But some components have their own display CSS instructions that overrides the windows width related CSS classes.

Possible fix, that works for me : just move all window width related CSS classes at the end of the CSS file to take precedence over the components CSS instructions (may cause some side effects, not tested).

Hitting browser/phone back button should close Modals

Enhancement scheduled for v0.5.1 in a few days

Best practice about pages/views structuration

Not a bug, but rather a discussion about pages/views structuration (OK to use Github issues for that or you prefer a more appropriate place ?)

Putting all the components in the /components folder is not convenient because the number of components (layouts, views, ui blocks, custom widgets, ...) quickly grows. What I did in my app is using different folders : /components, /layouts, /pages. Initial version of Quasar was also based on multiple folders (and one folder for each artefact, which was quite "heavy", the use of .vue files in 0.5.0 was a great improvement !).

Extract from my router.js file :

let routes = {
  // Default
  '/': {
    component: require('layouts/LayoutMain.vue'),
    subRoutes: {
      '/search': {component: require('pages/PageSearch.vue')},
      '/item': {component: require('pages/PageItem.vue')}
    }
  },
  // Default
  '/login': {
    component: require('layouts/LayoutLogin.vue'),
    subRoutes: {
      '/': {component: require('pages/PageLogin.vue')},
    }
  }
}

Extract from my weback.base.conf.js file :

  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'quasar': path.resolve(__dirname, '../node_modules/quasar-framework/'),
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'layouts': path.resolve(__dirname, '../src/layouts'),
      'pages': path.resolve(__dirname, '../src/pages')
    }
  },

Remark : customize the existing load() function (in router.js) to pass it for example 'layouts/LayoutMain.vue' or 'pages/PageSearch.vue' doesn't work, certainly because of the statically analysys of the dependencies by Webpack.

About the responsability of layouts, views, what do you think about putting header/footer UI parts in the views rather than in the layouts ? The header includes the title, icon, sometimes subtitles, and those informations are specific to the current view. If we include its to the layout, caching pages would be difficult because each time the user returns to the previous page, we would have to "update" the header/footer part (I currently have this real case on my app !).

My proposal : header/footer in the "view", and all the other parts (mainly drawers) in the "layout".
A "view" just have to show the drawer buttons if the layout it belongs has drawer(s).

accordion; text realignment when opening

For the default accordion and the Free - Can open multiple items simultaneously accordion the text realigns when opening.

Polished Grid Component

Grid Component feels too heavy and the design needs improvement. So here is my proposal through images:

Hover:

Selected row:

Selected row actions:

Sorted row:

Header and Footer:

Importing vue component

How can I import / use vue component inside quasar?
e.g. https://github.com/GuillaumeLeclerc/vue-google-maps

Polished Input Textboxes with Autocomplete

Let's improve Input Textboxes!

Would be great to optional have autocomplete functionality for input textboxes.
Suggestions will use Popover component.

Need a way to close thumbnails for Image Gallery

Polished Drawer

Let's improve Drawers by making ready to use HTML markup for the header.

Building android

transformClassesWithDexForArmv7DebugException in thread "main" java.lang.UnsupportedClassVersionError: com/android/dx/command/Main : Unsupported major.minor version 52.0

How can I solve this error?

Thanks

Default templates

Does quasar has any default template like ionic ($ ionic start myApp tabs)?

I hope to help you guys soon. I'm in love with VueJS and I'll try quasar today.

Polished Toast

Reading the Material Design guidelines got me thinking a bit. Here are some of the things we can do for Toasts:

• Only display one at a time.
  As a result there's no need anymore to show the "delete all" icon on the right. More screen real estate for the message itself.
• If triggering a Toast while another is being displayed then the first Toast is first slided out of view, then the new one slided into view.
  As a result the App's screen real estate is not filled with Toasts on top of your Layouts/Pages.
• Animation:
  • in: slide-up then fade in the contents
  • out: slide-down
• One color only (a neutral dark grey one); user can get confused by the multitude of colors popping up from the bottom of the screen and some colors may not get along with the design of an App (like positive Toast with the default primary color)
• No timeout. Just a default timeout of 3s. Toasts should inform user with a quick message and optionally an action like "Undo". Toasts should not control the flow or your app. For more complex cases a Dialog should be used instead.

Narrow screen width (phone) specifications:

Bigger screen width (tablet/desktop) specifications:

Looking forward to your comments!

Improvements needed for Range component

1. While clicking and dragging the slider around, the value in the model should update (right now it only updates after releasing)
2. Slider should have a 'step' value i.e. min- 0, max- 100, step- 10 would go 0,10,20,30...etc

I think it would also be nice if instead of the current style, it "fills up" as you drag it, i.e. the right side of the slider is grey and the selected portion is blue

quasar-tab target property should also takes HTMLElement values

Quasar-tab component currently takes a "target" property, of type String, which value is a "DOM element selector for target" (identify the content tab element associated with this tab).
It would be better if it also takes a HTMLElement value, it lets us reference the tab content elements using the v-el directive, which is cleaner than using dom selector.

Example :

<quasar-tabs>
    <quasar-tab icon="home" :target="$els.tab1" active=true >Tab1</quasar-tab>
    <quasar-tab icon="list" :target="$els.tab2">Tab2</quasar-tab>
</quasar-tabs>

<!-- Targets -->
<div v-el:tab1>
  ...tab content 1...
</div>
<div v-el:tab2>
  ...tab content 2...
</div>

Date & time picker component

Thanks for this amazing framework. I was surprised by the completeness of the components collection. One I do miss, is the datepicker component. Any plans to include it?

Some inspiration:
http://loujiayu.github.io/vue-material-design/#!/components/datepicker
https://github.com/hilongjw/vue-datepicker

Disabled state for Form components

Creating Parameterized Route for Page

How can I create / configure parameterized route for page, such as #/book/:bookId

I can't seem to find it on the docs. Seems currently the API docs only cover adding custom router.

Quasar-tabs: how to dynamically change opened tab ?

WIth quasar-tabs component, how can we set the active tab ?
This snipped doesn't work for me :

<quasar-tab icon="menu" :active="selectedTab == 'main'" target="#tab-main">
Main menu
</quasar-tab>
<quasar-tab icon="search" :active="selectedTab == 'search'" target="#tab-search">
Search
</quasar-tab>

The search tab is shown the first time we set selectedTab to "search" value, but not the following ones.
And how to know which quasar-tab is currently shown ? Maybe by providing the quasar-tab component a 'selectedTab' prop that it has to automatically fill with the quasar-tab id/reference or something else.

My use case : programmatically change the selected tab by setting a component data.

Quasar modals should take a VM instance instead of a component config object

The Quasar modal constructor takes a component config object instead of a VM instance. This doesn't allow us to configure the modal content.
For example, I want to pass dynamic data to my Modal window like as I do for other UI components but I can't because it's the Modal which is responsible for instancing the VM from the component config. I can pass data to the Modal by other means (events / vuex / get component ref and set data/props values) but it's not very clean.

I think it will be more convenient to pass a VM instance (created either by javascript with new Operator or by the HTML template). I will make the Modal component as a thin wrapper that just take a instanciated component (VM) and shows it on a modal window. With this solution, the modal window can keep its state while being hidden/shown several times (currently not possible to hide the Modal, only to close/destroy it).

Polished Lists

Lists are probably one of the main elements when building a UI. Let's make them better!
List items should be called tiles.

• 1, 2 or 3 liners
  • Tiles should be short and concise. If more details need to go into it, refer to the "expand/collapse" ability below.
• One primary and one secondary (supplemental) action / icon / form component
  
  • The primary element should be bigger in size than the secondary
  • Additional actions may be available if sliding (by swipe touch action) tiles to left or right. The additional actions will slide into view from left or right as if they are stick to the tiles.
    
• Ability to reorder tiles by dragging the secondary action.
  
• Ability to expand/collapse.
  • It fits great for tiles and this way we can entirely remove the Collapsibles.
  • One great benefit that comes into mind is the Drawer which can use lists to create sub-menus
    
    
• Dividers as DOM elements
  • Dividers should have their own DOM elements
  • Can be of two types: full-bleed (from left to right) and inset (starts on the left from beneath the tile content and goes to the right edge; so it skips the primary action)

Waiting for your comments!

Support

Hello @rstoenescu

would you been interested in setting up quasar on https://www.bountysource.com/ ? I'd like to contribute a bit :)

Cheers,
Peter

Empty app build fails on ios

On android it works.

It fails on ios with blank screen and with this message:

test[68142:1449022] Resetting plugins due to page load.

I then debugged js with this in script tag:

      <script type="text/javascript">
      window.onerror = function (errorMsg, url, lineNumber) {
           alert('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber);
      }
        @@appManifest
        quasar.boot(function() {
          quasar.start.app();
        });
      </script>

and got this alert:

Error: Error: Cannot load page. Script: undefined Line: 26

quasar website

I am not sure whether to bother you with this or not, but it might be of help. I merely bringing this up since it kind of contrasts with the quality of docs, framework itself, etc. As a fan of the 'total quality' concept I feel like addressing it. I am on a 13 inch retina display and some parts of your website seem slightly less sharp. For sure this part:

And maybe also the fonts in the toolbar, but maybe that's a color issue or something:

This part is sharp but messy due to small font and different size and not easy on the eyes colors:

Now that I am at it, it is also a bit unclear why the top three are apart from the other features:

If you really consider these three the 'top features' then maybe give them slightly more weight in font as well or something else, as now they just have different background which 'confuses me'.

To show differences in sharpness a picture of total page on my system:

hot reload not working

I'm testing quasar and I'm very excited, but not working hot reload.
My index.value file is changed and nothing happens
Can you help me?

Polished Label Chips and Textbox Chips

Let's make Chips better!

• Label chips should be able to also contain icons or a letter where image container is now placed
  
• Optional autocomplete functionality for Textbox Chips

Waiting for your comments!

Parallax speed property

I thought to have the 'parallax effect' the background should move (at a lower rate) as well.

E.g. see:
http://materializecss.com/parallax-demo.html

Polished Modal

Let's improve Modals!

Besides calling Modal.create() we should be able to use <quasar-modal> tags with v-ref in Vue HTML templates. One of the main advantages of using a tag for Modals is that it enables you to use page's data scope in your Modal; no need anymore to tamper with its scope data like:

import { Modal } from 'quasar'

let modal = Modal.create(....)

// now access and change:
modal.vm.$data

alignment of breadcrumb arrows

The alignment of breadcrumb arrows is slightly off:

Also small white lines visible.

Polished Grid Tiles / Image Gallery

Let's make a simple HTML markup for Grid Tiles. They work great with Image Gallery too, but this way we can use them with any components.

Grid Tiles should rearrange themselves to fit best when window is resized.

Any chance of hooking in Quasar with GraphQL?

I really like the work being done here.

Has there been any thought to hook GraphQL communications to the server to get persisted state with Quasar?

Scott

v-on:click events inside quasar-dropdown doesn't work

When adding an event listener v-on:click on an element inside a quasar-dropdown, the event listener doesn't work. For example :

<span v-on:click="event1()" class="label">Test</span>

The problem comes from the folllowing code in dropdown-common.js, that close the dropdown on next mousedown event everywhere on the page.

document.body.addEventListener('mousedown', this.close)

quasar-infinite-scroll continuously loads new items

In quasar-infinite-scroll component, the handler method is called each time the user is scrolling, but it should scroll only when the user is at the bottom of the block. Currently, this behaviour make the page load new items several times per seconds.

Even in the infinite-scroll demo page, the loading is done when user scrolls to the 3th item, but we expect is to be done only when the user reach the end of the block/page.

Missing block buttons

@media(max-width:600px) {
  .block-btn {
    width: 100%;
  }
}

Polished Search Component

In the quasar-search component, the placeholder should be configurable.
Choosing the icon could be useful too (even if "search" icon is OK for majority of use cases).

Range demo

In the last example the three ranges values seem slightly off from the one which was dragged last. Here the bottom one:

Here e.g. the top one:

Vue 2.0

I was wondering if Vue 2.0 conversion would be on the roadmap at some point?

Did I already ask this question? I just got a lot of deja vu and I went looking through the issues, but didn't find anything. 😄

Scott

Slider on fullscreen doesn't go away when on fullscreen

AJAX Post data casted to string

I tried to send POST data to server using this code

` var thisVm = this;

    quasar.make.a.post.request({
      url: 'message/new',
      data: {
        title: thisVm.title,
        content: thisVm.content,
      },
      xhrFields: {
        withCredentials: false
      }
    })
    .done(function(jsonObject) {
      quasar.navigate.to.route('#/');
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      console.log('uh, oh... the request failed...', errorThrown);
    });

`

but the form data sent as string

Getting started miss 'npm install'

When following the new 0.5.0 "Getting started", after 'quasar init', 'quasar dev' command throws the following error :

Error: Cannot find module 'express'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (J:\disque\workspace\sarqua\build\script.dev.js:3:13)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)

It's because node modules are not installed yet. We have to add a 'npm install' step just after the 'quasar init' step.