Vue - Layouts en Pages

Vue 3 Layouts en Pagina's

In deze les leer je de algemene structuur en architectuur van een Vue 3-applicatie beter begrijpen. Door een demo-app op te bouwen, wordt de praktische toepassing van layouts, pagina's, en componenten duidelijk.

Overzicht van de Vue Folderstructuur

Een typische Vue 3-applicatie volgt een gelaagde structuur, waarbij de kernconcepten zijn:

• Routing: Beheert navigatie tussen pagina’s, zowel server-side als client-side.
• Pages/Views: Vertegenwoordigen grote, zelfstandige schermen in de applicatie.
• Layouts: Bevatten de gemeenschappelijke structuur en UI-elementen, zoals een header of navigatiebalk.
• Componenten: Kleinschalige herbruikbare bouwstenen voor de UI.

Nieuw Project Aanmaken

1. Creëer een nieuw Vue-project:

   npm create vue@latest

Dit opent een interactive terminal waar je kan kiezen om bepaalde componenten reeds toe te voegen. Het is belangrijk dat je TypeScript en Vue Router toevoegt

2. Opruimen:
   • Verwijder alle standaard gegenereerde componenten en views.
   • Pas router/index.ts aan:

     import { createRouter, createWebHistory } from 'vue-router';
     
     const router = createRouter({
       history: createWebHistory(import.meta.env.BASE_URL),
       routes: []
     });
     
     export default router;
   • Wijzig App.vue:

     <script setup lang="ts">
     import { RouterView } from 'vue-router';
     </script>
     
     <template>
       <RouterView />
     </template>

Je hebt nu een blanco canvas voor je applicatie.

Componenten Identificeren

Aan de hand van de eindstructuur bepalen we de benodigde componenten:

• Hoofdnavigatie
• Dashboardweergave
• Lijst van helden
• Hero-detailpagina

Diagrammen en mock-ups helpen bij het identificeren van deze componenten. In het voorbeeldproject zie je hoe elke pagina en component logisch aansluit op de routing en functionaliteit.

4. Layouts vs Pages/Views

Wat is het Verschil?

• Layouts:
  • Definiëren de gemeenschappelijke structuur van meerdere pagina’s.
  • Bijvoorbeeld: navigatiebalk, footer, of een zijmenu.
• Pages/Views:
  • Vertegenwoordigen inhoudspecifieke pagina’s zoals een Dashboard of Hero-detailpagina.

MainLayout Aanmaken

Een layout wordt meestal als component opgebouwd en in de router geïnjecteerd:

<template>
  <div class="layout-container">
    <header>
      <nav>
        <button @click="router.push({ name: 'dashboard' })">Dashboard</button>
        <button @click="router.push({ name: 'heroes' })">Heroes</button>
      </nav>
    </header>
    <main>
      <RouterView />
    </main>
  </div>
</template>

In de router voeg je de layout toe:

import { createRouter, createWebHistory } from 'vue-router';
import MainLayout from '@/layouts/MainLayout.vue';

const routes = [
  {
    path: '/',
    component: MainLayout,
    children: [
      { path: '', name: 'dashboard', component: () => import('@/views/DashboardView.vue') },
      { path: 'heroes', name: 'heroes', component: () => import('@/views/HeroesView.vue') }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;

---

5. Routing en Navigatie

Routing Functies

• Navigeren tussen pagina’s kan via:
  • Pad: router.push('/heroes')
  • Naam: router.push({ name: 'dashboard' })

Vue Router ondersteunt:

1. Lazy loading: Laad componenten pas wanneer ze nodig zijn.
2. Hash routing vs Gewone routing:
   • Hash routing: Sneller, maar minder geschikt voor SEO.
   • Gewone routing: Meer configuratie nodig op de server, maar beter voor SEO.

---

6. Eventhandling in Vue

Vue biedt een eenvoudige manier om gebeurtenissen te verwerken:

• HTML-standaard:

  <button onclick="alert('Button clicked!')">Click me</button>
• Vue-methode:

  <template>
    <button @click="alert('Button clicked!')">Click me</button>
  </template>

Met @click definieer je een handler voor de click-gebeurtenis.

---

7. Styling

Voeg stijl toe aan je componenten met scoped CSS:

<style scoped>
  .title {
    font-size: 1.5rem;
    color: grey;
    font-weight: bold;
  }

  .layout-container {
    margin: 2rem;
  }

  .button-container {
    display: flex;
    gap: 0.25rem;
  }

  button {
    background-color: #eeeeee;
    border-radius: 0.25rem;
    font-weight: 500;
    border: none;
    padding: 0.25rem 0.5rem;
    color: #567868;
  }

  button:hover {
    background-color: #e6e6e6;
    color: #0096e8;
    cursor: pointer;
  }
</style>

---

8. Samenvatting

In deze les heb je geleerd:

• Het verschil tussen Layouts en Pages/Views.
• Hoe je routing implementeert en laadt via Vue Router.
• Het gebruik van eventhandlers zoals @click.
• Het verschil tussen hash routing en SEO-vriendelijke URL-routing.
• Stijl toevoegen aan componenten met scoped CSS.