Create "Developer Paths"

[smolinari]

This would be in the Guide section and it would help devs figure out how to get things accomplished with Quasar. It would enhance the first steps, to include more, but with a task based selection. i.e.

What would you like to do with Quasar?

• I want the basic Quasar app
• I want to develop native mobile apps
• I want to develop desktop apps
• I want to develop web apps
• I want to develop web apps with an Express API
• I want to develop web apps with a REST API via Feathers
• I want to develop web apps with a GraphQL API via Apollo

These won't be full descriptions, but rather only the main steps one would take, with links to the full docs for each step.

Any other suggestions to this improvement would be greatly appreciated.

Scott

[Mark-L6n]

Great idea @smolinari. Here are some ideas:

The Create Your First App section ends with:

Create *.vue components from ready to use component templates folder (/templates):
$ quasar new [type] <name of your component with optional subfolder>
Type can be layout, view (page content), component (generic *.vue component).
You can even make your own component templates and use CLI to generate them in your App.

The new user then doesn't know how to get to the point of creating a minimal SPA with Quasar components. Here are ideas of basic things to clarify, and questions I have.

Following on creation:

quasar init <folder name> creates in src/App.vue:

  <div id="q-app">
    <router-view></router-view>
  </div>

So is <div id="q-app"> required, and the entry point for the app?

And then it seems you probably need to create a <q-layout> component to hold everything else:

A Layout is constructed by <q-layout> Component. It is mandatory unless you really know what you are doing. (from Layout Overview)

In this example app, <q-layout> is placed in the src/App.vue file, and then only optionally (web uses <q-layout>, mobile doesn't—is that normal?)

Also, these apps only use <q-layout> once; is an app limited to one usage? I see quasar init <folder name> creates <q-layout> in src/components/Index.vue; also, the command quasar new layout <name of your component with optional subfolder> creates it.

quasar new view <name of your component with optional subfolder> — what is the purpose of this? It just appears to generate a generic Vue template. It doesn't include class=“layout-view”>: are these related/different, and what are their purposes?

quasar new component <name of your component with optional subfolder> — does this create boilerplate for you to create a new kind of component, or add one of Quasar's components? (looks like the former).

And importantly, what is best practice for adding Quasar's components? Are there multiple ways of doing it?

[rstoenescu]

Wish more would contribute with ideas like this. It's also good to know which areas of the documentation need more information/clarifications. It helps a lot in improving the documentation.

[smolinari]

So is <div id="q-app"> required, and the entry point for the app?

Yes it is. This is standard procedure for any SPA though. It should be common knowledge for anyone familiar with SPAs. Maybe we shouldn't be taking this knowledge for granted or rather assume people coming to Quasar are "in the know". Hmm... I think for that though, we'd need a whole other level of docs for raw SPA beginners and to be honest, that isn't in the plans currently. For now, we'll have to refer to the Vue docs and also refer to other resources for learning.

In this example app, <q-layout> is placed in the src/App.vue file, and then only optionally (web uses <q-layout>, mobile doesn't—is that normal?)

To be honest, that is even above my own head, but it does sound strange. Maybe @rstoenescu can shed more light on that? Razvan?

Also, these apps only use <q-layout> once; is an app limited to one usage?

<q-layout> is the component you would use to define page or "overarching component" structure. So, if you have different page or component structures, you'd need different layouts.

quasar new view — what is the purpose of this? It just appears to generate a generic Vue template. It doesn't include class=“layout-view”>: are these related/different, and what are their purposes?

The view template is exactly that. A base component template. You can make anything you want out of it.

And importantly, what is best practice for adding Quasar's components? Are there multiple ways of doing it?

Nope. It's just create the component, import it in a parent component and use the component's tags (and whatever other features are built into the component). Well that is the suggested way/ best practice. There is also the global registration. But, just like global variables, you should try to avoid global components too. 😄

Scott

[Sogl]

Is there any news? I'm here because "Quick Start" documentation is incomplete 😄

[smolinari]

If you have any questions or issues getting started, the best place to go is the forum or the chat.

Scott

[smolinari]

Ah, and I see you've already been there. Great! 😄

Scott