Vue 3-tutorial voor beginners: een webshop in elf hoofdstukken

Vue.js is een progressief JavaScript-framework: je voegt het met één script-tag toe aan een bestaande pagina, of je bouwt er een volledige applicatie mee met een buildtool. Deze tutorial neemt de tweede weg, die van de officiële documentatie en van vrijwel elk hedendaags project.

In elf hoofdstukken bouw je een kleine webshop: een productpagina met kleurvarianten, een winkelmandje, een formulier voor reviews en de animaties die daarbij horen. Elk begrip komt langs op het moment dat de applicatie het nodig heeft, geen hoofdstuk eerder.

Wat je gaat bouwen

Eén applicatie, die hoofdstuk na hoofdstuk aangroeit. Aan het eind toont ze een product met zijn afbeelding, reageert ze op het hoveren over de kleuren, schakelt ze de knop uit zodra een variant uitverkocht is, vult ze een winkelmandje, accepteert ze gevalideerde reviews en animeert ze die bij het verschijnen.

Vanaf hoofdstuk 8 wordt de code opgeknipt in componenten, zoals in een echt project.

Het traject in elf hoofdstukken

1. Een Vue-applicatie maken, het project, createApp, de eerste reactieve waarde.
2. Attributen binden, de productafbeelding tonen met v-bind.
3. Conditionele rendering, vertellen of het product op voorraad is, met v-if en v-show.
4. Lijsten renderen, de samenstelling van de stof en de varianten, met v-for.
5. Events afhandelen, de knop die het mandje vult.
6. Classes en stijlen binden, de kleurbolletjes en de uitgeschakelde knop.
7. Computed properties, de afbeelding en de beschikbaarheid afleiden uit de gekozen variant.
8. Componenten en props, de applicatie opknippen en gegevens doorgeven.
9. Events doorgeven, de klik naar het parentcomponent laten opborrelen.
10. Formulieren en v-model, het reviewformulier en de validatie ervan.
11. Transitions, het verschijnen en verdwijnen animeren.

De volledige code staat bovenaan de pagina klaar om te downloaden: een Vite-project met een map per hoofdstuk en de testsuite die elk hoofdstuk controleert.

Composition API: de stijl van deze tutorial

Vue biedt twee manieren om een component te schrijven. De Options API ordent de code in opties: data, methods, computed. De Composition API schrijft hem als gewone variabelen en functies in een blok <script setup>.

Deze tutorial gebruikt de Composition API, omdat de officiële documentatie die stijl aanraadt voor een nieuw project en omdat je hem tegenkomt in het grootste deel van de code die sinds Vue 3 is geschreven. Beide stijlen blijven ondersteund: de Options API is niet deprecated, en je zult hem nog lang tegenkomen in bestaande projecten.

Hier is de vertaaltabel, om bij de hand te houden.

// Composition API, in <script setup>

data() { return { n: 0 } }         const n = ref(0)
computed: { double() { … } }       const double = computed(() => …)
methods: { faire() { … } }         function faire() { … }
props: { titre: String }           const props = defineProps({ titre: String })
emits: ['valider']                 const emit = defineEmits(['valider'])
mounted() { … }                    onMounted(() => { … })
watch: { n(v) { … } }              watch(n, (v) => { … })

this.n                             n.value   // alleen in het script,
                                             // nooit in de template

Elk hoofdstuk waar dat speelt, herinnert aan het equivalent in de Options API van het behandelde begrip.

Wat je nodig hebt

• De basis van HTML, CSS en JavaScript. Als arrow functions en destructuring je niets zeggen, fris ze dan op voordat je begint.
• Node.js 22.18 of nieuwer (of 24.12 en later). Controleer met node -v: de officiële projectgenerator weigert oudere versies. Werk ook npm bij met npm install -g npm@latest: de npm 10 die bij Node 22 zit, faalt bij npm install van een nieuw Vue-project.
• Een code-editor. Visual Studio Code met de officiële extensie ‘Vue – Official’ geeft autoaanvulling in .vue-bestanden. WebStorm en Zed voldoen ook.

Kennis van Vue 2 is niet nodig. Kom je daarvandaan, onthoud dan dat Vue.use, Vue.mixin en Vue.prototype niet meer bestaan: alles loopt voortaan via de applicatie-instantie die createApp teruggeeft.

Hoe je deze tutorial aanpakt

Typ de code liever over dan hem te kopiëren. Maak na elk hoofdstuk expres iets kapot en lees de foutmelding: dat is de beste manier om ze te leren ontcijferen.

Elk hoofdstuk eindigt met een oefening die op het behandelde begrip aansluit en die je oplost met wat je net hebt geschreven.

Na deze tutorial

Wil je de applicatie op echte data aansluiten, lees dan hoe je Firebase aan een Vue-applicatie toevoegt.

Zijn de elf hoofdstukken klaar, dan is het delen van state tussen componenten met Pinia het logische vervolg, gevolgd door routing met Vue Router. Aan de architectuurkant: hoe je je eigen Vue-plugins schrijft, en hoe je de vindbaarheid van een Vue-applicatie aanpakt.