Komponenten Grundlagen

Komponenten sind wiederverwendbare, in sich geschlossene UI-Bausteine. Sie kapseln Template, Logik und optional Styles in einer Einheit.

Eine Vue-Anwendung ist typischerweise als Baum von verschachtelten Komponenten organisiert.

       App
      /   \
  Header  Main
         /    \
    Sidebar  Content
              /   \
          Article  Article

Varianten der Definition

Vue bietet verschiedene Wege, Komponenten zu definieren:

Variante	Build-Tool	API Style	Anwendungsfall
Plain JS + Inline Template	Nein	Options	Einfache Erweiterungen
Plain JS + Template String	Nein	Options	Ohne Build-Setup
SFC + Options API	Ja	Options	Klassischer Ansatz
SFC + Composition API	Ja	Composition	Moderner Standard

Variante 1: Plain JS (Inline Template)

Ohne Build-Tool kann Vue direkt im Browser verwendet werden:

<div id="app">
  <my-counter></my-counter>
</div>

<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

const MyCounter = {
  template: `
    <button @click="count++">Count: {{ count }}</button>
  `,
  data() {
    return { count: 0 }
  }
}

createApp({
  components: { MyCounter }
}).mount('#app')
</script>

Variante 2: SFC + Options API

Single-File Components mit der klassischen Options API:

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

<style scoped>
button { font-weight: bold; }
</style>

Variante 3: SFC + Composition API

Single-File Components mit der modernen Composition API (empfohlen):

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

<style scoped>
button { font-weight: bold; }
</style>

Registrierung

Komponenten müssen registriert werden, bevor sie im Template verwendet werden können.

Globale Registrierung

import { createApp } from 'vue'
import App from './App.vue'

// Komponenten importieren
import BaseButton from './components/BaseButton.vue'
import BaseCard from './components/BaseCard.vue'

const app = createApp(App)

// Global registrieren
app.component('BaseButton', BaseButton)
app.component('BaseCard', BaseCard)

app.mount('#app')

Lokale Registrierung: Options API

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

<template>
  <ComponentA />
  <ComponentB />
</template>

Lokale Registrierung: Composition API

Mit <script setup> sind importierte Komponenten automatisch verfügbar:

<script setup>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

// Keine explizite Registrierung nötig!
</script>

<template>
  <ComponentA />
  <ComponentB />
</template>

<template>
  <MyComponent />
  <BaseButton />
</template>

Unterscheidbar von nativen HTML-Elementen
IDE-Unterstützung besser

<template>
  <my-component></my-component>
  <base-button></base-button>
</template>

Erforderlich in DOM Templates
HTML-konform

Dokumentation

Offizielle Vue Dokumentation:

Components Basics - Grundlagen
Component Registration - Registrierung