Could someone explain how quasar-components should be used? - quasar

Question

I am new to Quasar framework. Could someone explains how quasar-components should be used?
1)Where should they be stored?
2)What will be the folder structure if more components are used for a single app?
3)How will be the router.js file be?

Answer 1

You have information about the structure of a quasar project here
As you can see all the components you need are saved in the templates folder.
The router.js will be according to your needs. I recommend that you look at this tutorial on vue-router that is very complete and will clarify things to you.
For example, the contents of my router.js would be as follows:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
function load (component) {
return () => System.import(`components/${component}.vue`)
}
const router = new VueRouter({
routes: [
{
path: '/',
component: load('Index')
}, // Default
{
path: '/login',
component: load('Login')
},
{
path: '/home',
component: load('Home'),
meta: {
requiresAuth: true
}
},
{
path: '/settings',
component: load('Settings')
},
{
path: '/session',
component: load('Session'),
meta: {
requiresAuth: true
}
},
{
path: '/node/:id',
component: load('Node'),
meta: {
requiresAuth: true
}
},
{
path: '/admin/:action',
component: load('Admin'),
meta: {
requiresAuth: true
}
},
{
path: '/template/:id',
component: load('Template'),
meta: {
requiresAuth: true
}
},
{
path: '/output/:id',
component: load('Output'),
meta: {
requiresAuth: true
}
},
{
path: '/form/:id',
component: load('Form'),
meta: {
requiresAuth: true
}
},
{
path: '/file/:id',
component: load('File'),
meta: {
requiresAuth: true
}
},
{
path: '*',
component: load('Error404')
}
]
})
export default router
Then in the component.vue I navigate to another route:
HTML Inside <template>
<button v-if="session !== null" #click="goPath('/home')"><i>home</i></button>
MODEL Inside methods I have the function:
goPath (url) {
this.$router.push(url)
}
As I said you will have other needs and I do not think this example applies but to give you an idea.