Closed maxime-aubry closed 6 years ago
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
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.
@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');
Got Quasar UMD to work with Nuxt follwing @UnnoTed 's tips.
In short:
npm install --save quasar-framework
nuxt.config.js
plugins: [
"~/plugins/quasar.js"
]
/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] });
@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
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.
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.
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.
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.
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
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.
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.
thanks @johnyluyte for the information.....
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?
@giona69 SSR is under works (95% done) ;) also a Nuxt module for Quasar.
@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
@ttxtosca targeting end of month, so anywhere around that.
Awesome feature!
This should have been closed some time ago. "vue-cli-plugin-quasar" was released a lot of time ago.
vue add quasar
Just a note if someone needs to pass global configurations like for Loading bar:
Vue.use(Quasar, {
config: {
loadingBar: {
color: "primary",
size: "3px",
},
},
components: [
...
],
});
@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 🙏
@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.
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.