Usage with vue-cli (without quasar-cli)

[guumaster]

I like very much this set of components. But I don't want/need all the tooling involved. I was trying to start a new project with vue init webpack demo But then I couldn't add just quasar-framework to it.

Is it possible? Can you add a section on the docs on how to use it without the cli and only with the official vue webpack template?

Thanks!

[rstoenescu]

vue init quasarframework/quasar-template-default <folder-name>

BUT, you are seriously undermining what Quasar and its CLI is and can do. Please check the Quasar CLI commands list. Highlighting especially the list, dev (with it QR option), build, wrap, serve and version commands.

The power of Quasar's CLI will become even more obvious with the release of more wrappers and starter kits (in the very near future). Also, Quasar is not just a Vue template and a collection of components. It does a lot more. Most important one being: imagine the exact same code can run as website, Cordova app and Electron app. This Github ticket seriously makes me think even more of raising the awareness of what Quasar is and can offer in a more clear and obvious way through tutorials and articles.

20:13 $ quasar

 ________
 \_____  \  __ _______    ___________ _______
  /  / \  \|  |  \__  \  /  ___/\__  \\_  __ \
 /   \_/.  \  |  // __ \_\___ \  / __ \|  | \/
 \_____\ \_/____/(____  /____  >(____  /__|
        \__>          \/     \/      \/


  Usage: quasar <command> [options]


  Commands:

    init [ap] <folder>     create Quasar App
    list                   list available app templates
    new <template> <name>  generate .vue from app Component templates
    dev [theme] [options]  run dev server
    build [theme]          build production app
    clean                  clean production build artifacts
    test                   run unit and/or e2e tests
    lint                   lint source code
    wrap [type]            wrap app (currently only with "cordova" type)
    serve [folder]         create live reload static-content server
    version                output CLI and current app Quasar version
    help [cmd]             display help for [cmd]

  Options:

    -h, --help  output usage information

Historically speaking (but not as argument as to why you should use the CLI, so just for informational purposes), Quasar had its own CLI long before Vue. Same for routing, and many more.

[guumaster]

Maybe I didn't elaborate enough on why I was asking for this. I did try the CLI and is really good (also tried angular, ionic, vue, etc), but still for a particular project I just want the components, not the whole framework and tooling. I was in the middle of doing that, but couldn't manage to migrate it fully. I got stuck on some loaders with an error "Can't resolve stylus-loader" that I didn't knew how to deal with.

Then I thought that it could be a good idea for some other people stuck like me to have a small section in the docs saying "If you just want the components, do this".

I'm fairly new to vue but not to frontend, and after using webpack for a while I haven't seen two similar setups yet. I know that quasar is a great framework, but for people that are no too familiar with what is under the hood of webpack configurations (my case), having two "official" version of webpack supported and maintained by the vue community (my guess is that is bigger than quasar for now) it would be preferible to have a simple way to add quasar-framework components without changing all the tooling for an existing vueproject.

[mubaidr]

I am having the same issue, i just want to integrate Qusar in my vue-cli project for website development only. Would love to see how this is possible.

[rstoenescu]

Will see what I can do, but as I stated earlier, using other starter kits than Quasar's greatly reduces what this framework can do...

[ikazoy]

Having the same issue here.

I have used Quasar framework before for the purpose of building whole app and felt it was really nice experience. Now then, an idea to apply quasar components into an existing web development project comes up to my mind, after trying other material UI components such as vuetify and vue-material. In my case, the existing project is not even vue-cli project. I am trying to start replacing existing elements with Vue components containing UI components mentioned before.

[pjar]

I wish I could use it easily in my elixir/phoenix project. I'm trying to make it run with it like 4th day and the only option useful for me is now doing quasar build for every single change which takes a long time. I can't use it with quasar's build-in server because my app is already served by its served (Cowboy). It would be enough for me to run quasar dev and get the output files to the folder from which I could serve them from phoenix.

[rstoenescu]

The standalone version is coming up so devs can add Quasar to their already working project.

[pjar]

I've noticed you made some commits for this which is super great. I really appreciate your efforts, I definitely am setting up a patreon for you this week.

[tianjianchn]

For anyone wants to import quasar into existing project, some advices below:

1. add quasar-framework and quasar-extras dependencies, like yarn add quasar-framework quasar-extras -S
2. import it with:

import Vue from 'vue';

import 'quasar-framework/dist/quasar.mat.css';

import Quasar, * as All from 'quasar-framework';

import 'quasar-extras/roboto-font'; // Optional
import 'quasar-extras/material-icons';

Vue.use(Quasar, {
  directives: All, // Test only, not for production
  components: All, // Test only, not for production
});

Current version: 0.14.7

[Robula]

@rstoenescu
I have my own Vue/Webpack setup (no CLI) and I would like the ability to import and use your wonderful components and styles. Do you have any plans to make your components available outside of the Framework?

Thank you

[laurentpayot]

@Robula try Quasar standalone version: http://quasar-framework.org/guide/embedding-quasar.html