Vue Cheat Sheet

Wat is Vue?

Vue helpt je om websites te bouwen met herbruikbare componenten — net als LEGO-blokjes. Je schrijft HTML, JavaScript en CSS samen in één .vue-bestand. We gebruiken Vue 3 met de <script setup> syntax (Composition API).

Basics

6 onderwerpen

Project Setup

Maak een nieuw Vue-project aan met Vite.

Denken in Code

Zet elke opdracht om naar duidelijke Vue-code in 6 stappen.

Single File Components

Bouw .vue-bestanden met template, script en style — de bouwstenen van Vue.

Template Syntax

Mustache {{ }}, :bind en @event — de basis van Vue templates.

Props

Geef data door tussen componenten met defineProps().

Lists & Keys

Render arrays met v-for en gebruik :key correct.

Reactivity & State

4 onderwerpen

Reactivity (ref & reactive)

Onthoud en update waardes met ref() en reactive() — de basis van interactieve apps.

Computed Properties

Afgeleide waardes die automatisch updaten — dé Vue-manier van slimme state.

Watchers

watch en watchEffect: reageer op state-veranderingen.

Lifecycle Hooks

onMounted, onUnmounted: code op het juiste moment uitvoeren.

Directives

2 onderwerpen

Conditional Rendering

v-if vs v-show: wanneer gebruik je wat?

v-model Deep Dive

Two-way binding op inputs en custom components — Vue's superkracht.

Routing

2 onderwerpen

Vue Router

Navigatie tussen pagina's met <RouterView> en <RouterLink>.

useRouter & useRoute

Programmatisch navigeren en URL-parameters gebruiken.

Interaction

2 onderwerpen

Events

Reageer op clicks en inputs met @click en event modifiers zoals .stop en .prevent.

Forms & Input

Werk met formulieren en inputs met v-model.

Composition

3 onderwerpen

Slots

Component composition met <slot> — krachtiger dan React's children.

Composables

Vue's antwoord op custom hooks: herbruikbare logica in useXxx.js-bestanden.

Provide / Inject

Geef data door de hele tree zonder props drilling.

Data & API's

3 onderwerpen

Data Fetching

Haal data op van API's met fetch en async/await.

Loading & Error States

Geef feedback aan gebruikers tijdens laden en bij fouten.

localStorage

Bewaar data in de browser tussen sessies.

Authentication

4 onderwerpen

Pinia (Store)

Deel state door je hele app met Vue's officiële state management.

Auth Store Setup

Maak een Pinia store voor globale login state met localStorage.

Login & Register

Bouw login- en registratieformulieren met validatie.

Protected Routes

Beveilig routes met Navigation Guards (router.beforeEach).

Styling

2 onderwerpen

Styling

CSS in Vue: <style scoped>, class-binding en CSS-bestanden.

Tailwind CSS

Utility-first CSS framework installeren en gebruiken in Vue.

Vue Specials

2 onderwerpen

Template Refs

Pak DOM-elementen direct vast met ref() in je template.

Teleport

Render content naar een andere plek in de DOM — perfect voor modals en tooltips.

Deploy

1 onderwerp

Website Publiceren

Zet je Vue-portfolio online met GitHub Pages.

Opdrachten

Oefenproject

Film Tracker

Bouw een doorlopende Film Tracker app in 7 niveaus — alle Vue-onderwerpen komen aan bod.

Leerpad

Aanbevolen volgorde

1 Start Setup Denken in Code SFC Template Syntax Props Reactivity
2 Daarna Lists & Keys v-if / v-show Events Forms v-model Computed Watchers Lifecycle Router
3 Advanced Fetching Loading/Error localStorage Slots Composables Provide/Inject Pinia Auth Store Login/Register Protected Routes Tailwind Template Refs Teleport Publiceren