Vue.js

Vue.js
colspan="2" class="notheme" style="text-align:center; background:#Vorlage:Standardfarbe; color:#202122;" | Vue.js Logo
Basisdaten
Hauptentwickler	Evan You
Entwickler	Evan You, Online-Community
Erscheinungsjahr
Aktuelle Version	()
Aktuelle Vorabversion	()
Betriebssystem
Programmier­sprache	JavaScript (bis Version 2.6) TypeScript (ab Version 3.0)
Kategorie	Webframework
Lizenz
deutschsprachig	ja

Vue.js (View, englische Aussprache [vjuː]) ist ein clientseitiges JavaScript-Webframework zum Erstellen von Single-Page-Webanwendungen nach dem MVVM-Muster, es kann allerdings auch in Multipage-Webseiten für einzelne Abschnitte verwendet werden. Zudem wird serverseitiges Rendern unterstützt.<ref>Server-Side Rendering (SSR). In: vuejs.org. Abgerufen am 29. September 2025 (). </ref>

Konzept

Die Entwickler bezeichnen Vue.js als progressiv und inkrementell adaptierbar im Vergleich zu anderen Webframeworks. Dies ermöglicht es Entwicklern, die Struktur der Anwendung flexibel an ihre derzeitigen Anforderungen anzupassen. Um Vue.js einsetzen zu können, sind lediglich Kenntnisse in JavaScript, HTML und CSS notwendig.<ref>Introduction. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref>

Durch Umsetzung des MVVM-Musters bietet Vue.js die Möglichkeit des Data Bindings, so dass Aus- und Eingaben direkt an die Datenquelle gekoppelt werden. Somit ist das manuelle Ermitteln der Daten (z. B. via jQuery) aus dem HTML-DOM nicht notwendig. Hierbei sind keinerlei zusätzliche Annotationen wie bei Knockout.js notwendig, durch die Deklaration in einem Vue-Element werden ganz normale JavaScript-Variablen als reaktive Elemente eingebunden.

Die App-Instanz

Jede Vue.js Anwendung benötigt (mindestens) eine zentrale App-Instanz. Je HTML-Datei sind beliebig viele weitere möglich. Eine Instanz wird mit der Funktion createApp() und einer Wurzelkomponente als erstem Parameter erzeugt. Mit mount() muss diese Komponente dann an einen HTML-Knoten gebunden werden (hier mit dem Element <div id="knoten"></div> unter Verwendung des CSS-Selektors „#knoten“).<ref>Creating a Vue Application. In: vuejs.org. Abgerufen am 28. September 2025 (). </ref> <syntaxhighlight lang="javascript" line="1"> import { createApp } from 'vue' import Komponente from './Komponente.vue'

const app = createApp(Komponente)

app.mount('#knoten')

</syntaxhighlight>

Vue-Komponenten

Vue.js Anwendungen werden mittels Komponenten strukturiert, welche sich baumartig verschachteln lassen. Komponenten werden entweder mit der Composition oder der Options API meist als Single-File Components (SCF) bestehend aus JavaScript, HTML-Template und CSS-Block in einer auf .vue endenden Datei definiert. Neben der nachstehenden lokalen Registrierung, können Komponenten alternativ auch global registriert werden.<ref>Components Basics. In: vuejs.org. Abgerufen am 28. September 2025 (). </ref><ref>Single-File Components. In: vuejs.org. Abgerufen am 15. Juni 2024 (). </ref><ref>Component Registration. In: vuejs.org. Abgerufen am 28. September 2025 (). </ref>

Composition API

Mittels der Composition API lassen sich Vue-Komponenten unter Verwendung importierter Funktionen erstellen. Hinter der Bezeichnung werden die Konzepte Reaktivität, Lebenszyklen einer Komponente und Dependency Injection gekapselt. Dieser Ansatz ist der Bevorzugte der beiden und wird in der Regel in Kombination mit dem Syntaktischen Zucker <script setup> verwendet.<ref name=":0">Composition API FAQ. In: vuejs.org. Abgerufen am 28. September 2025 (). </ref><syntaxhighlight lang="vue" line="1"><script setup> import { ref } from 'vue'

const zustand = ref(0)

function hochzaehlen() {

 zustand.value++

} </script>

<template>

   <button @click="hochzaehlen">Wert: Vorlage:Zustand</button>

</template>

<style scoped>

   button { font-size: 2rem; }

</style></syntaxhighlight>

Options API

Erstellt man Vue-Komponenten mittels der Options API, dann wird stattdessen ein Objekt mit Eigenschaften wie data, methods oder mounted definiert.<ref>Introduction - Options API. In: vuejs.org. Abgerufen am 28. September 2025 (). </ref> Auch wenn zahlreiche Vorteile die Verwendung der Composition API hervorstellen, ist aktuell nicht geplant die Options API vollständig aus Vue.js zu entfernen.<ref name=":0" /><syntaxhighlight lang="vue"> <script> export default {

 data() {
   return {
     zustand: 0
   }
 }

} </script>

<template>

 <button @click="zustand++">Wert: Vorlage:Zustand</button>

</template> </syntaxhighlight>

Double Curly Syntax

Mithilfe von doppelt geschweiften Klammern (double-curly syntax) können Datenfelder einer Komponente direkt in den HTML-DOM eingefügt werden. Ändern sich die zugrunde liegenden Werte, wird die Ausgabe automatisch aktualisiert.<ref>Form Input Bindings. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref> Das Databinding ist in beide Richtungen möglich (“Two way databinding”), wodurch die Veränderung der Daten ebenfalls ermöglicht wird.<ref>Component v-model. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref> Die Direktive model sorgt für das Databinding mit Input-Elementen. <syntaxhighlight lang="html" line="1">

 <input v-model="message">

</syntaxhighlight>

Direktiven

Mit HTML-Attributen ist es möglich, Aktionen auszuführen, wie zum Beispiel mit einer Schleife durch ein Array zu iterieren, HTML-Knoten nur optional in den DOM einzubinden (v-if), HTML-Knoten auszublenden (v-show), Events abzufangen (v-on) oder Attribute an Variablen zu binden (v-bind). Die Direktiven von Vue.js sind an dem Präfix v- erkennbar.<ref>List Rendering. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref> Eigene Direktiven können definiert werden in Form von JavaScript-Funktionen. Bis Version 2 war es auch möglich, Filter anzuwenden, um die Ausgabe von JavaScript-Elementen zu verändern.<ref>Filters - Vue 3 Migration Guide. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref> <syntaxhighlight lang="html" line="1">

• Vorlage:Item

</syntaxhighlight>

Composables

Composables sind wiederverwendbare Funktionsmodule der Composition API. Sie dienen der Kapselung und Wiederverwendung von zustandsbehafteter, reaktiver Logik innerhalb von Vue-Komponenten und unterscheiden sich damit von einfachen Hilfsfunktionen, die keinen Reaktivitätskontext besitzen.<ref>Composables. In: vuejs.org. Abgerufen am 29. Oktober 2025 (). </ref><ref>Vanessa Otto: JavaScript: Modernes State Management ohne zusätzliche Library in Vue.js 3. In: heise.de. Heise Medien GmbH & Co. KG, 11. Januar 2022, abgerufen am 29. Oktober 2025. </ref> <syntaxhighlight lang="typescript" line="1"> import { ref } from 'vue'

export function useZaehler() {

 const zaehler = ref(0) // reaktive Variable
 
 const erhoehen = () => { // Funktion zum Erhöhen des Zählers
   zaehler.value++
 }
 
 return { zaehler, erhoehen } // Rückgabe von Zustand und Funktion

} </syntaxhighlight>

Das Beispiel-Composable mit Zähler und Funktion zum Inkrementieren des Wertes kann wie folgt innerhalb eines Script-Blocks verwender werden: <syntaxhighlight lang="vue" line="1"><script setup> import { useZaehler } from './useZaehler.js'

const { zaehler, erhoehen } = useZaehler() console.log(zaehler.value) // Ausgabe -> 0 erhoehen() console.log(zaehler.value) // Ausgabe -> 1 </script></syntaxhighlight>

Lebenszyklus der Komponenten

Alle Instanzen und Komponenten durchlaufen einen Lebenszyklus,<ref>Lifecycle Hooks - Diagram. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref> dieser besteht aus mehreren Etappen, welche dazu genutzt werden können, eigene Funktionen aufzurufen. Vor allem die Etappe mounted wird sehr häufig verwendet<ref>Understanding Vue.js Lifecycle Hooks. Abgerufen am 17. Februar 2017 (). </ref>, da diese aufgerufen wird, unmittelbar nachdem die Komponente im DOM eingebunden wurde. Durch die Verwendung von nextTick() kann Code definiert werden, welcher erst aufgerufen wird, wenn die Komponente vollständig aktualisiert wurde.<ref>Global API: General - nextTick. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref> <syntaxhighlight lang="vue" line="1"> <script setup> import { nextTick, onMounted, onUnmounted } from 'vue'

onMounted(() => {

 // Wird aufgerufen, wenn die Komponente sichtbar wird, wie z. B. durch v-if oder vue-router
 console.log('Die Komponente wurde vollständig im DOM eingebunden.')
 
 nextTick(() => {
   console.log('Die Komponente wurde gerendert.')
 })

})

onUnmounted(() => {

   // Wird aufgerufen, wenn die Komponente aus dem DOM entfernt wird
   // z.B. removeListener(XY)

}) </script> </syntaxhighlight>

Modularität

Vue.js kann durch Erweiterungen ergänzt werden, diese können Mixins,<ref>Mixins. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref> Direktiven, Komponenten und Objekte enthalten. Als offizielle Erweiterungen werden vuex, ein an Redux angelehnter Zustandsmanager, und vue-router, für die Navigation zwischen verschiedenen Komponenten einer Single-Page-Webanwendung, angeboten.<ref>vuejs/vuex. In: github.com. Vue, 29. September 2025, abgerufen am 29. September 2025. </ref><ref>Getting Started | Vue Router. In: router.vuejs.org. Abgerufen am 29. September 2025 (). </ref><ref>Ways of Using Vue: Single-Page Application (SPA). In: vuejs.org. Abgerufen am 15. Juni 2024 (). </ref> Erweiterungen werden unter Verwendung von use() zu einer App-Instanz hinzugefügt.<ref>Plugins. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref><syntaxhighlight lang="javascript" line="1"> app.use(meinPlugin, { /* weitere Optionen */ }) </syntaxhighlight>

Entwicklungsversion

Die Entwicklungsversion ermöglicht die Ausgabe von Informationen und Warnungen, wenn der Debug-Modus aktiviert ist. Die für den Produktiveinsatz vorgesehene Version unterstützt diesen Modus nicht.<ref>Production Deployment. In: vuejs.org. Abgerufen am 29. September 2025 (). </ref> Für die Entwicklungsversion gibt es eine Browsererweiterung für Google Chrome und Mozilla Firefox, um das Debugging der Anwendung zu erleichtern.<ref>Vue.js devtools. In: chrome.google.com. Abgerufen am 21. Juli 2016. </ref>

Releasefrequenz, Support und Abwärtskompatibilität

Vue.js folgt dem Konzept des Semantic Versionings, hat aber keine vorgegebenen Releasezyklen. Minor Releases enthalten neue Features und werden typischerweise alle 3 bis 6 Monate released. Bislang gab es 3 Major Releases (2015, 2016, 2020). Nicht abwärtskompatible Features werden zunächst als deprecated gekennzeichnet und erst in der nächsten Major Release entfernt.<ref name="releases">Releases. Abgerufen am 27. September 2025 (). </ref> Long Term Support (LTS) gibt es offiziell keinen. Bei der letzten Major Release 2 wurde noch 18 Monate lang Fehler und Sicherheitslücken und weitere 18 Monate lang nur noch Sicherheitslücken behoben.

Verwendung in MediaWiki

Vue.js ist die offizielle Wahl der Wikimedia Foundation für die Verwendung als zukünftiges JavaScript-Framework für MediaWiki.<ref>Eric Gardner und Anne Tomasevich: 2020: The Year in Vue. In: techblog.wikimedia.org. Wikimedia Foundation, 22. Januar 2021, abgerufen am 7. Dezember 2021 (). </ref><ref>mw:Vue.js</ref> Beispielsweise wurde die neue Mediensuche auf Wikimedia Commons mit Vue.js realisiert.<ref>mw:Extension:MediaSearch</ref>

“With excitement we’re sharing today that Vue.js is Wikimedia Foundation’s official choice for adoption as future JavaScript framework for use with MediaWiki.”

– Volker E.: WMF<ref>listarchive:list/wikitech-l@lists.wikimedia.org/thread/SOZREBYR36PUNFZXMIUBVAIOQI4N7PDU/ 2. August 2021.</ref>

Siehe auch

• Liste von Webframeworks
• MVVM

Weblinks

Commons: Vue.js – Sammlung von Bildern, Videos und Audiodateien

• Vue.js Website (englisch)
• Vue.js auf GitHub (englisch)
• Vue DevTools (englisch)
• Awesome Vue.js (englisch)

Einzelnachweise

<references responsive />