Add quasar into an existing project

[maxime-aubry]

Hello.

I would like to know how to add Quasar into an existing project, wich one uses TypeScript ! I created my project with vue-cli 3.0 from vue.js.

Thanks.

[UnnoTed]

I got it working by installing quasar-framework, then import like:

import Quasar from "quasar-framework/dist/quasar.mat.esm";
import "quasar-framework/dist/umd/quasar.mat.css";

Vue.use(Quasar);

Importing the component on .vue

<template>
  <q-btn label="hello" />
</template>

import { QBtn } from "quasar-framework/dist/quasar.mat.esm";

export default {
  name: "App",
  components: {
    QBtn,
  },
};

you can avoid writing quasar-framework/dist/quasar.mat.esm everytime by creating an alias in the webpack's config to route quasar to quasar-framework/dist/quasar.mat.esm...

You can copy the aliases from: https://github.com/quasarframework/quasar-cli/blob/5cf2b99479c066116ec698397f7c0ea761f7d2c9/lib/build/webpack-config.js#L86

Edit 1: you can also import components like this to save time:

import Quasar, { QLayout, QInput, QBtn } from "quasar-framework/dist/quasar.mat.esm";
Vue.use(Quasar, { components: [QLayout, QInput, QBtn] });

Edit 2: material icons from quasar-extras

import "quasar-extras/material-icons/material-icons.css";

Edit 3: there are plugins like Dialog and Notify ( http://quasar-framework.org/components/dialog.html ) and directives like: http://quasar-framework.org/components/material-ripples.html which should be injecTed like:

import Quasar, { QLayout, QInput, QBtn, Dialog, Ripple } from "quasar-framework/dist/quasar.mat.esm";
Vue.use(Quasar, { components: [QLayout, QInput, QBtn], plugins: [Dialog], directives: [Ripple] });

Edit 4: material font and animations from quasar-extras

import "quasar-extras/roboto-font";
import "quasar-extras/animate";

Edit 5: to write your own theme run npm install --save-dev stylus-loader stylus or yarn add --dev stylus-loader stylus create a theme.styl file with the code below and import through the main .vue file, if you're using a different css language you can import it through the script section with just a import "./theme.styl";

@import "~quasar-framework/dist/core.variables.styl";

// your variables goes here
$primary   = #027be3
$secondary = #26A69A
$tertiary  = #555

$neutral   = #E0E1E2
$positive  = #21BA45
$negative  = #DB2828
$info      = #31CCEC
$warning   = #F2C037

@import "~quasar-framework/dist/quasar.mat.styl";

Edit 6: custom icons

import iconSet from "quasar-framework/icons/mdi";
import "quasar-extras/mdi";

Vue.use(Quasar, { ... });
Quasar.icons.set(iconSet); // after injection in vue

[Kminkjan]

Great! I use the same setup (vue-cli 3 with quasar 0.15) and i just couldn't get the notify to work. I wish quasar 0.15 played a bit nicer when working with the new Vue cli, as they are both great technologies.

[hurrycaner]

@Kminkjan I was having problems with notify, but i found out that the problem is being fixed at #1913 Can you confirm if your problem is this?

EDIT: Sorry I didn't read your question properly... to make notify work i added this to my entry file:

 // added the {Notify} to import
import Quasar, {Notify} from 'quasar-framework/dist/quasar.mat.esm'

// added Notify as a plugin option in Vue plugin import
Vue.use(Quasar, {plugins: [Notify]}); 

Now i can make use to Notify through this.$q.notify('Message');

[johnyluyte]

Got Quasar UMD to work with Nuxt follwing @UnnoTed 's tips.

In short:

1. npm install --save quasar-framework
2. Edit nuxt.config.js

   plugins: [
   "~/plugins/quasar.js"
   ]

3. create 'quasar.js' in /plugins/ folder:

import Vue from "vue";
// import "quasar-framework/dist/umd/quasar.mat.css";
import "quasar-framework/dist/umd/quasar.ios.css";

import Quasar, { QLayout, QInput, QBtn } from "quasar-framework/dist/quasar.mat.esm";
Vue.use(Quasar, { components: [QLayout, QInput, QBtn] });

4. check out the above thread by @UnnoTed for more tips.

[nusendra]

@johnyluyte do you build hybrid mobile app with nuxt? can u share ur code? i dont know how to setup webpack with nuxt for building mobile app. thanks

[johnyluyte]

I tried to build a hybrid mobile App with Nuxt and Quasar last week. But I'm too busy to continue. Here are some of my thoughts.

1. Use Quasar CLI I haven't really tried Quasar CLI, but being able to build hybrid mobile App is one of Quasar's best selling point, so this should work. But I personally don't like being forced to use an opinionated structure, especially we have other community-supported project like Nuxt and Cordova. I might be wrong with this and YMMV. You should try this first and see if it suit you well.

2. Use Quasar + Nuxt It is stated in Quasar's offical Roadmap that they will release a Quasar + Nuxt starter kit in Quasar v1.0. The release date is still TBA but I'm really looking forward.

3. Use Nuxt + UMD Quasar + Cordova I haven't tried this but there are some tutorials out there, e.g. this one. You have to configure Webpack and Cordova, but Cordova Plugin might be a problem.

4. Nuxt generate + (any Vue UMD) + Cordova Its like the above method, but with Nuxt generate command. This one also seems viable, but Cordova Plugin might also be a problem. Japanese article but the codes are in English

5. Nuxt + (any Vue UMD) + PWA This is not really a hybrid mobile App, its PWA. But considering how iOS finally started to work on PWA, I actually think this is not a bad way to go.

6. https://github.com/nuxt/nuxt.js/issues/1334 (Edit)

7. https://www.webfacts.jp/nuxt-js-web-cordova-build (Edit)

Personally I would start with Nuxt PWA and use UMD Quasar, then jump to Quasar+Nuxt when Quasar v1.0 released. Or substitute Quasar with other framework if it doesn't suit my project well.

I might dive into this again 2 or 3 weeks later. Hope this help.

[nusendra]

thanks @johnyluyte for the information.....

[giona69]

I tried to integrate quasar with nuxt but I got a lot of errors (window not defined etc) ... it seems many components of quasar aren't ready to be server side rendered ... anyone has a better experience?

[rstoenescu]

@giona69 SSR is under works (95% done) ;) also a Nuxt module for Quasar.

[ttxtosca]

@rstoenescu that are very good news. I suppose that the nuxt module will be official when SSR is fully working, do you have any idea for the approximated time needed to fill the last 5%?

Congrats for you work! Quasar is a really nice project

[rstoenescu]

@ttxtosca targeting end of month, so anywhere around that.

[rodrigoslayertech]

Awesome feature!

[rstoenescu]

This should have been closed some time ago. "vue-cli-plugin-quasar" was released a lot of time ago. vue add quasar

[rulrok]

Just a note if someone needs to pass global configurations like for Loading bar:

    Vue.use(Quasar, {
        config: {
            loadingBar: {
                color: "primary",
                size: "3px",
            },
        },
        components: [
            ...
        ],
    });

[luckylooke]

@rstoenescu I have tried vue add quasar but it does not add quasar CLI to the project, when I install in manually npm install -g @quasar/cli I have limited commands as I am not in quasar project. There is only command for creating new project, but I want to augment one created by Vue CLI, is this somehow possible? I would love to see quasar init command. Thanks 🙏

[rstoenescu]

@luckylooke If you want to use Quasar CLI (recommended) then you should create a project with it. Quasar CLI projects !== Vue CLI projects. Do not mix the two. They are incompatible. Check docs how to install and create a project with Quasar CLI.