Getting starting with default quasar project and vue

ericg97477

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

ouaR

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

ericg97477

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?

s.molinari

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

ericg97477

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

s.molinari

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

Scott

ericg97477

@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:

quasar init my_app
cd my_app
quasar dev

Method 2:

vue create my_app
cd my_app
vue add quasar
yarn dev

Method 1 is the recommended way.

Is my understanding correct?

s.molinari

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

ericg97477

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

No More Posting New Topics!

Getting starting with default quasar project and vue