🏠 Home / Hub

🔷 Quasar Lesson 03 — Layout & Navigation

← Back to Quasar Menu  |  🏠 Hub

1. QLayout — Page Structure

<!-- MainLayout.vue -->
<template>
  <q-layout view="hHh lpR fFf">

    <q-header elevated>
      <q-toolbar>
        <q-btn flat round icon="menu" @click="drawer = !drawer" />
        <q-toolbar-title>My App</q-toolbar-title>
        <q-btn flat round icon="search" />
      </q-toolbar>
    </q-header>

    <q-drawer v-model="drawer" show-if-above bordered>
      <q-list>
        <q-item clickable to="/">
          <q-item-section avatar><q-icon name="home" /></q-item-section>
          <q-item-section>Home</q-item-section>
        </q-item>
        <q-item clickable to="/about">
          <q-item-section avatar><q-icon name="info" /></q-item-section>
          <q-item-section>About</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer elevated>
      <q-toolbar>
        <q-toolbar-title>Footer</q-toolbar-title>
      </q-toolbar>
    </q-footer>

  </q-layout>
</template>

<script>
export default {
  data() { return { drawer: false } }
}
</script>
view="hHh lpR fFf" — layout zones config
h=header, l=left drawer, f=footer, p=page · uppercase=fixed, lowercase=scrollable

2. QTabs — Tab Navigation

<q-tabs v-model="tab" align="justify">
  <q-tab name="home" icon="home" label="Home" />
  <q-tab name="profile" icon="person" label="Profile" />
  <q-tab name="settings" icon="settings" label="Settings" />
</q-tabs>

<q-separator />

<q-tab-panels v-model="tab" animated>
  <q-tab-panel name="home">Home content</q-tab-panel>
  <q-tab-panel name="profile">Profile content</q-tab-panel>
  <q-tab-panel name="settings">Settings content</q-tab-panel>
</q-tab-panels>

3. QPage — Page Component

<!-- pages/IndexPage.vue -->
<template>
  <q-page class="flex flex-center">
    <div class="q-pa-md">
      <div class="text-h4">Welcome!</div>
    </div>
  </q-page>
</template>
Quasar CSS Utility Classes:
q-pa-md = padding all medium  |  q-ma-sm = margin all small
text-h4/h5/h6 = headings  |  flex flex-center = flexbox center
q-mt-md = margin-top medium  |  full-width = width 100%

4. Router — Page Linking

// router/routes.js
const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') },
      { path: 'about', component: () => import('pages/AboutPage.vue') },
      { path: 'user/:id', component: () => import('pages/UserPage.vue') }
    ]
  }
]

// Navigate in template
<q-btn to="/" label="Home" />
<router-link to="/about">About</router-link>

// Navigate in script
this.$router.push('/about')
this.$router.push({ path: '/user', query: { id: 1 } })

← Quasar 02  |  Next: Quasar 04 → Forms →

📌 Study Checklist