Wat is Vue.js en hoe begin je ermee?

Als je nog niet weet wat een framework precies is of hoe frontend, backend en full-stack verschillen, lees dan eerst de pagina met de populairste frameworks. Hier begin je direct met Vue.js, kort Vue. Vue is een frontend framework. Het helpt je knoppen, formulieren en lijsten te bouwen die de bezoeker op het scherm ziet. Je leert in deze pagina hoe je een eerste project maakt en welke onderdelen je het vaakst gebruikt.

Waarom kies je voor Vue?

Evan You maakte Vue. Hij bracht het in 2014 uit. Vue is bedoeld om makkelijk te leren. Je hoeft niet meteen alles te begrijpen om iets moois te maken. Daarom is Vue zo geschikt voor beginners.

Vue werkt met componenten. Een component is een los stuk van je pagina, zoals een knop, een kaart of een menu. Je bouwt je site door die stukjes samen te zetten, net als Lego. Een blokje gebruik je zo vaak als je wil.

Vue zet de HTML, JavaScript en CSS van een component netjes in één bestand. Dat bestand heet een Single File Component en het eindigt op .vue. Je ziet in één oogopslag wat er op het scherm komt en hoe het eruitziet.

Wat is een Single File Component?

Het is een bestand met drie delen: de HTML bovenaan, de logica in het midden en de stijl onderaan. Alles wat bij één component hoort, staat dus op één plek.

Hoe zet je een eerste Vue-project op?

Je hebt eerst Node.js nodig. Dat is een programma dat JavaScript buiten de browser laat draaien. Je installeert het via de officiële Node.js-website. Node.js bevat ook npm: het hulpprogramma waarmee je extra pakketjes installeert.

Open daarna je terminal en voer deze commando's uit:

Terminal

npm create vue@latest my-app
cd my-app
npm install
npm run dev

Wat doen deze commando's?

• npm create vue@latest my-app maakt een nieuwe map met de naam my-app. Het stelt je een paar vragen, zoals of je Vue Router wil gebruiken. Voor je eerste project mag je overal "Nee" antwoorden.
• cd my-app zet je in die map.
• npm install downloadt alle onderdelen die het project nodig heeft.
• npm run dev start een lokale ontwikkelserver. Dat is een eigen webserver op je computer, alleen voor jou.

Open daarna http://localhost:5173 in je browser. Je ziet de startpagina van je eigen Vue-project. De pagina ververst zichzelf als je iets verandert en opslaat.

Lees de officiële handleiding

Het commando npm create vue@latest kan na verloop van tijd veranderen. Check altijd de officiële Vue-installatiegids als je iets anders ziet.

Hoe ziet een Vue-project eruit?

Na het aanmaken zie je ongeveer deze mappen en bestanden:

my-app/
  index.html          ← de pagina die de browser laadt
  src/
    main.js           ← het startpunt van je app
    App.vue           ← het hoofdcomponent
    components/       ← hier zet je je eigen componenten
  public/             ← bestanden zoals plaatjes die ongewijzigd blijven
  package.json        ← een lijst met de pakketten van je project

Je werkt vooral in de map src. Het bestand main.js hoef je zelden aan te passen. Je schrijft je eigen componenten in src/components.

Hoe ziet een eerste Vue-component eruit?

Maak een nieuw bestand aan in src/components/Greeting.vue:

src/components/Greeting.vue

<script setup>
import { ref } from 'vue'

const name = ref('Anna')
</script>

<template>
    <h1>Hallo, {{ name }}!</h1>
    <input v-model="name" placeholder="Typ je naam" />
</template>

<style scoped>
h1 {
    color: #42b883;
}
</style>

Wat zie je hier?

• Het blok <script setup> bevat de logica. Hier maak je data aan.
• ref('Anna') maakt een stukje data aan dat kan veranderen. Vue houdt het in de gaten.
• Het blok <template> bevat de HTML. De dubbele accolades {{ name }} tonen de waarde op het scherm.
• v-model koppelt het invoerveld aan name. Typ je iets, dan past de tekst bovenaan zich direct aan.
• Het blok <style scoped> geeft de kleur alleen aan deze component.

Gebruik nu het component in src/App.vue:

src/App.vue

<script setup>
import Greeting from './components/Greeting.vue'
</script>

<template>
    <main>
        <Greeting />
    </main>
</template>

Welke kernbegrippen moet je kennen in Vue?

Met een paar begrippen bouw je al veel:

• Componenten zijn de bouwstenen van je pagina. Je maakt ze in .vue-bestanden.
• Reactieve data met ref zorgt dat de pagina meebeweegt als de data verandert. Denk aan een scorebord dat direct bijwerkt.
• Directives zijn speciale attributen die met v- beginnen. v-model koppelt een invoerveld. v-if toont iets alleen als een voorwaarde klopt. v-for herhaalt iets voor elk item in een lijst.
• Props zijn gegevens die je van de ene component naar de andere stuurt. Zie het als een bestelling die je van de ene keuken naar de andere brengt.
• Events zijn reacties op acties van de bezoeker, zoals een klik. In Vue schrijf je die als @click.

Wil je deze onderdelen verder uitdiepen? Lees dan de officiële Vue-documentatie. Die is helder en heeft voorbeelden voor elk onderdeel.

Wanneer kies je voor Vue?

• Je begint net met frontend frameworks en wil een zachte leercurve.
• Je werkt aan een project waarbij duidelijke, overzichtelijke code belangrijk is.
• Je houdt van een duidelijke scheiding tussen HTML, JavaScript en CSS.
• Je wil later uitbreiden naar een volledige site met Nuxt, het full-stack framework voor Vue.

Vue heeft een grote gemeenschap. Dat betekent dat je veel voorbeelden en antwoorden vindt. Vergelijk je Vue met React, dan zie je het grootste verschil in de schrijfstijl. React gebruikt alleen JavaScript om een pagina op te bouwen. Vue gebruikt aparte blokken voor HTML, JavaScript en CSS. Lees ook de React-pagina om het verschil zelf te zien.

Veelgemaakte fout

Vergeet je ref() niet als een waarde op het scherm moet veranderen. Gebruik je een gewone variabele, dan merkt Vue niets van de wijziging. De bezoeker ziet dan niets veranderen.

Wat leer je hierna?

Je weet nu hoe je een Vue-project opzet, hoe componenten werken en wat ref en v-model doen. Probeer zelf een kleine teller of een takenlijst te bouwen. Daarna is Nuxt de logische volgende stap. Nuxt breidt Vue uit met pagina's, routering en server-functies. Lees er meer over op de Nuxt-pagina.

Blijf oefenen. Elk klein project maakt je handiger. Je bent al verder dan je denkt!