Getting starting with default quasar project and vue



  • Perhaps I am just confused, I thought this series of steps would create a default vue project with quasar which I could then serve with “quasar dev”.

    $ vue --version
    3.3.0
    
    $ quasar --version
    0.17.23
    
    $ vue create array_sort
    $ cd array_sort
    $ vue add quasar
    $ quasar dev
    

    However, I get the following error:

    $ quasar dev
     app:paths ⚠️  Error. This command must be executed inside a Quasar v0.15+ project folder. +0ms
     app:paths For Quasar pre v0.15 projects, npm uninstall -g quasar-cli; npm i -g quasar-cli@0.6.5 +3ms
    

    What am I doing wrong?

    Output from the above commands are:

    $ vue create array_sort
    
    Vue CLI v3.3.0
    ? Please pick a preset: default (babel, eslint)
    
    
    Vue CLI v3.3.0
    ✨  Creating project in /Users/ericg/depot_javascript/array_sort.
    🗃  Initializing git repository...
    ⚙  Installing CLI plugins. This might take a while...
    
    yarn install v1.13.0
    info No lockfile found.
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    
    success Saved lockfile.
    ✨  Done in 72.98s.
    🚀  Invoking generators...
    📦  Installing additional dependencies...
    
    yarn install v1.13.0
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    [4/4] 🔨  Building fresh packages...
    success Saved lockfile.
    ✨  Done in 11.36s.
    ⚓  Running completion hooks...
    
    📄  Generating README.md...
    
    🎉  Successfully created project array_sort.
    👉  Get started with the following commands:
    
     $ cd array_sort
     $ yarn serve
    
    $ vue add quasar
    
    📦  Installing vue-cli-plugin-quasar...
    
    yarn add v1.13.0
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    [4/4] 🔨  Building fresh packages...
    
    success Saved lockfile.
    success Saved 1 new dependency.
    info Direct dependencies
    └─ vue-cli-plugin-quasar@0.17.1
    info All dependencies
    └─ vue-cli-plugin-quasar@0.17.1
    ✨  Done in 9.80s.
    ✔  Successfully installed plugin: vue-cli-plugin-quasar
    
    ? Select Quasar Theme: Material Design
    ? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes
    ? Import all Quasar components, directives and plugins? Yes
    ? Use RTL support? No
    ? Choose Icon Set Material Icons
    ? Quasar i18n lang - one from https://github.com/quasarframework/quasar/tree/dev/i18n en-us
    ? Select features: Animations, Material Icons, Fontawesome, Ionicons, MDI
    
    🚀  Invoking generator for vue-cli-plugin-quasar...
    📦  Installing additional dependencies...
    
    yarn install v1.13.0
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    [4/4] 🔨  Building fresh packages...
    success Saved lockfile.
    ✨  Done in 11.45s.
    ⚓  Running completion hooks...
    
    ✔  Successfully invoked generator for plugin: vue-cli-plugin-quasar
       The following files have been updated / added:
    
         src/styles/quasar.styl
         src/styles/quasar.variables.styl
         vue.config.js
         package.json
         public/favicon.ico
         src/App.vue
         src/assets/logo.png
         src/components/HelloWorld.vue
         src/main.js
         yarn.lock
    
       You should review these changes with git diff and commit them.
    
     INFO  quasar
                 Documentation can be found at: https://quasar-framework.org
    
    Quasar is relying on donations to evolve. We'd be very grateful if you can
                     take a look at: https://www.patreon.com/quasarframework
                                                Any amount is very welcomed.
    If invoices are required, please first contact razvan.stoenescu@gmail.com
    
                 Please give us a star on Github if you appreciate our work:
                                   https://github.com/quasarframework/quasar
    
                                                        Enjoy! - Quasar Team
    


  • Why don’t you use quasar init <project_name> ?



  • The documentation in the part “Vue CLI 3 plugin” seems to indicate that one starts with vue create and then do vue add quasar.

    https://quasar-framework.org/guide/

    Is that not correct? If not, what is?



  • If you are using the Vue plugin for Quasar with Vue’s CLI, you need to be using a Vue CLI command to run the project.

    So, it’s not quasar dev you need, but rather yarn serve.

    https://cli.vuejs.org/guide/cli-service.html#using-the-binary

    Scott



  • @s-molinari ok. So, what are the complete set of steps to get a default vue app running with quasar?



  • What you did were the steps. Only at the end, it’s Vue’s CLI you are working with. Not Quasar’s.

    Scott



  • @s-molinari Ok. I think I have a better understanding now after playing around a bit more. There are two primary ways to create and run a default vue app using quasar:

    Method 1:

    1. quasar init my_app
    2. cd my_app
    3. quasar dev

    Method 2:

    1. vue create my_app
    2. cd my_app
    3. vue add quasar
    4. yarn dev

    Method 1 is the recommended way.

    Is my understanding correct?



  • Yes. That is correct. Method 1 is using Quasar’s CLI and you are creating a Quasar app, so you can further develop and build your app (as in get it ready for production) with Quasar’s CLI.

    The second method is binding Quasar’s component system to Vue. where you then have to work with Vue’s CLI, losing the advantages Quasar offers in terms of building your app.

    Hope that makes sense.

    Scott



  • @s-molinari It does make sense. thank you.


Log in to reply