CODEWITHSUNDEEP
quasar
Darshan theerth
Darshan theerth

Reputation: 536

Could someone explain how quasar-components should be used?

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?

Upvotes: 1

Views: 1568

Answers (1)

ricopo
ricopo

Reputation: 475

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.

Upvotes: 2

Related Questions