Single File Components

Wat is een Single File Component?

In Vue maak je custom HTML tags die componenten heten. Elk component woont in zijn eigen bestand met de extensie .vue — een Single File Component (SFC).

Het verschil met React: in een .vue-bestand zitten je template (HTML), script (JavaScript) en style (CSS) netjes naast elkaar in aparte blokken. Geen JSX.

De Drie Blokken

Elk .vue-bestand bestaat uit maximaal drie blokken:

<script setup>
// JavaScript: state, functies, imports
</script>

<template>
  <!-- HTML: wat je op het scherm ziet -->
</template>

<style scoped>
/* CSS: alleen voor dit component */
</style>

Volgorde maakt niet uit, maar de meeste developers schrijven ze in deze volgorde: script → template → style.

Je Eerste Component Maken

Stap 1: Components folder aanmaken

Maak in je src folder een nieuwe folder components (met kleine letter):

src/
├── components/       ← Nieuwe folder
│   └── Car.vue       ← Nieuw component
├── App.vue
└── main.js

Stap 2: Component bestand aanmaken

Maak in de components folder een bestand Car.vue. Een component bestand begint altijd met een hoofdletter en heeft de extensie .vue.

Stap 3: Component code schrijven

Schrijf de drie blokken — je hoeft niet eens iets te importeren als je geen state hebt:

<!-- src/components/Car.vue -->
<template>
  <h1>Hi, I am a Car!</h1>
</template>

Component Gebruiken

Stap 1: Component importeren

Voordat je een component kunt gebruiken, importeer je het in een ander .vue-bestand:

<!-- src/App.vue -->
<script setup>
import Car from './components/Car.vue'
</script>

Stap 2: Component renderen

Vervolgens kun je dit component gebruiken alsof het een HTML tag is in je template:

<!-- src/App.vue -->
<script setup>
import Car from './components/Car.vue'
</script>

<template>
  <div>
    <Car />
  </div>
</template>

Dit zet het volgende op het scherm: Hi, I am a Car!

Meer Voorbeelden

<!-- src/components/Welcome.vue -->
<template>
  <h2>Welkom op mijn website!</h2>
</template>

<!-- src/components/Button.vue -->
<template>
  <button>Klik hier</button>
</template>

<!-- src/App.vue - Gebruik beide components -->
<script setup>
import Welcome from './components/Welcome.vue'
import Button from './components/Button.vue'
</script>

<template>
  <div>
    <Welcome />
    <Button />
  </div>
</template>

Wat is <script setup>?

Je ziet altijd <script setup> in moderne Vue 3 code. Dit is de aanbevolen syntax sinds Vue 3.2.

Met script setup (modern — zo gebruik je het)

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

const message = ref('Hallo Vue!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

Zonder script setup (oude stijl — niet meer gebruiken)

<script>
export default {
  data() {
    return {
      message: 'Hallo Vue!'
    }
  }
}
</script>

Belangrijke Regels

• Bestandsnamen beginnen met hoofdletter: Car.vue, niet car.vue
• Tags in PascalCase gebruiken: <MyComponent />, niet <my-component /> (al werkt het ook)
• Imports altijd met .vue extensie
• Eén component per bestand — zo houd je je code overzichtelijk
• Vue 3 templates mogen meerdere root-elementen hebben (anders dan Vue 2 of React)

Veelgemaakte Fouten

<template>
  <Car />  <!-- Vue weet niet wat Car is! -->
</template>

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

<template>
  <Car />
</template>

src/components/car.vue   ← Verwarrend
src/components/myCard.vue ← Niet de conventie

src/components/Car.vue
src/components/MyCard.vue

import Car from './components/Car'  // ❌ Werkt niet

import Car from './components/Car.vue'  // ✅