Was ist Vue JS? Wofür es taugt und wann es passt

Was ist Vue JS?

Vue.js ist ein quelloffenes JavaScript Framework zum Bau von Benutzeroberflächen. Es baut auf Standard HTML, CSS und JavaScript auf und bietet ein deklaratives, komponentenbasiertes Programmiermodell. Ändern sich Ihre Daten, aktualisiert Vue den Bildschirm für Sie, daher eignet es sich gut für interaktive Seiten.

Die offizielle Dokumentation nennt Vue ein "progressives Framework". Das heißt, Sie setzen es zunächst nur in einem kleinen Teil einer Seite ein. Danach ergänzen Sie bei Bedarf Routing, Zustandsverwaltung und Build Werkzeuge. Quelle: offizielle Einführung in Vue.

In diesem Leitfaden beantworten wir die Frage, was ist Vue JS, aus praktischer Sicht. Ein Unternehmer ohne Programmierkenntnisse kann folgen. Außerdem finden Entwickler konkrete Entscheidungshilfen.

Zudem verlinken wir technische Aussagen auf offizielle Quellen. So prüfen Sie jede Angabe selbst, und Sie wissen, wo Sie bei neuen Versionen nachlesen.

Wofür braucht man Vue.js?

Mit Vue.js bauen Sie Oberflächen, die im Browser laufen und auf Eingaben reagieren. Zum Beispiel gehören dazu Formularprüfung, eine filterbare Produktliste, ein Admin Dashboard, ein Live Suchfeld und ein mehrstufiger Checkout.

Den Einsatz fassen Sie in drei Gruppen zusammen:

• Kleine Interaktionen in einer bestehenden Seite ergänzen, zum Beispiel Tabs, Zähler oder ein Rechnerformular.
• Eine vollständige Single Page Application (SPA) im Browser bauen, zum Beispiel ein Kundenportal.
• Eine Website erzeugen, die zuerst auf dem Server rendert, zum Beispiel eine Firmenseite oder einen Blog.

Allerdings ist Vue kein Content Management System. Seitenstruktur, Daten und Veröffentlichungsablauf müssen Sie weiterhin selbst planen. Deshalb sehen Sie Vue besser als Oberflächenschicht und nicht als "Website Baukasten".

In einem Onlineshop schreiben Sie zum Beispiel den Produktfilter mit Vue. Die Produktdaten liefert dagegen ein anderes System, und Lager, Preis und Bestelllogik bleiben im Backend.

Was ist Vue JS und wie funktionieren Templates und Reaktivität?

Vue beruht auf zwei Kernideen: deklaratives Rendering und Reaktivität. Beim deklarativen Rendering beschreiben Sie im Template, wie der Bildschirm aussehen soll, abhängig vom JavaScript Zustand. Reaktivität bedeutet, dass Vue Zustandsänderungen verfolgt und das DOM effizient aktualisiert. Beide Begriffe stammen aus der offiziellen Dokumentation.

Ein konkretes Beispiel hilft. Zunächst speichern Sie die Artikelzahl im Warenkorb in einer Variablen und geben diese im Template aus. Dann erhöhen Sie die Variable, sobald ein Besucher ein Produkt hinzufügt. Die Zahl auf dem Bildschirm ändern Sie nie von Hand.

Der Vorteil liegt in der einfacheren Wartung. Denn Sie lesen im Template ab, welche Daten welchen Teil des Bildschirms steuern. Andererseits hilft es bei der Fehlersuche, wenn Sie verstehen, wie Reaktivität Änderungen verfolgt.

Kurz gesagt: Das Template trägt das Aussehen, JavaScript trägt das Verhalten, und Vue verbindet beides. Ohne diese Verbindung müssten Sie nach jeder Änderung das DOM manuell anpassen, und das ist fehleranfällig.

Wie bauen Sie Komponenten in Vue auf?

In Vue zerlegen Sie die Oberfläche in Komponenten. Eine Komponente ist ein wiederverwendbarer Baustein mit eigenem Markup, eigener Logik und eigenem Stil. Sie kann ein Button, eine Produktkarte, ein Suchfeld oder eine ganze Seite sein.

In Projekten mit Build Schritt schreiben Sie Komponenten als Single File Components (Dateien mit der Endung .vue). Die offizielle Dokumentation nennt dieses Format den empfohlenen Weg, sobald Ihr Anwendungsfall ein Build Setup rechtfertigt. Daher liegen Logik, Template und Stil in einer Datei.

Eine Komponente besteht aus drei Teilen:

1. Template: der HTML ähnliche Bereich, der den Bildschirm beschreibt.
2. Skript: der JavaScript oder TypeScript Bereich mit Zustand und Funktionen.
3. Stil: der CSS Bereich, meist nur für diese Komponente gültig.

Zum Beispiel schreiben Sie eine Produktkarte einmal und nutzen sie hundertmal in einer Liste. Somit bleibt das Design einheitlich, und Sie ändern es an einer Stelle.

Außerdem erleichtern Komponenten die Teamarbeit. Ein Entwickler baut die Karte, ein anderer den Warenkorb, und beide bearbeiten selten dieselbe Datei. Das verkürzt auch die Fehlersuche, weil Sie das Problem schnell auf einen Teil eingrenzen.

Wie funktioniert die Template Syntax mit Direktiven?

Ein Vue Template ergänzt normales HTML um spezielle Attribute, die Direktiven heißen. Drei davon decken den Alltag ab. Erstens zeigt v-if einen Block bei erfüllter Bedingung. Zweitens macht v-for aus einem Array eine Liste. Drittens verbindet v-model ein Formularfeld in beide Richtungen mit Ihren Daten.

<template>
  <input v-model="suche" placeholder="Produkt suchen">
  <p v-if="suche">Ihre Suche: {{ suche }}</p>
  <ul>
    <li v-for="artikel in artikelListe" :key="artikel.id">{{ artikel.name }}</li>
  </ul>
</template>

In diesem kleinen Beispiel aktualisiert sich der Wert suche, während der Besucher tippt. Dann erscheint der Absatz von selbst, und die Liste zeigt pro Artikel eine Zeile. Sie schreiben also keinen einzigen Befehl für das DOM.

Das Attribut :key hilft Vue zu erkennen, welche Zeile zu welchem Artikel gehört. Deshalb vergeben Sie für jede Zeile eine eindeutige ID.

In einem Produktfilter speisen zum Beispiel Suchfeld, Liste und die Meldung "keine Treffer" sich aus denselben Daten. Somit laufen Anzeige und Daten nie auseinander.

Options API oder Composition API: Wie wählen Sie richtig?

Vue bietet zwei Schreibstile. Bei der Options API definieren Sie die Logik in einem Objekt mit Optionen wie data, methods und mounted. Bei der Composition API legen Sie den reaktiven Zustand direkt im Funktionsbereich an.

Die offizielle Dokumentation rät Ihnen, beim Lernen den Stil zu wählen, der Ihnen leichter fällt. Für die Produktion empfiehlt sie dagegen die Options API für einfache Aufgaben ohne Build Werkzeuge. Für ganze Anwendungen empfiehlt sie die Composition API mit Single File Components. Die FAQ rät außerdem bei neuen Projekten zur Composition API.

In der Praxis ist die Composition API der sinnvolle Standard für neue Projekte. Dennoch schreiben Sie ein laufendes Projekt mit Options API nicht nur wegen des Stils neu. Beide Stile funktionieren im selben Projekt, sodass Sie neue Komponenten modern schreiben können.

Wie schreiben Sie einen kleinen Warenkorb Zähler mit der Composition API?

Das folgende Beispiel zeigt die schlankste Form einer Single File Component. Sie speichert eine Zahl und erhöht sie bei jedem Klick. Es ist eine vereinfachte Variante des Zähler Beispiels aus der Dokumentation.

<script setup>
import { ref } from 'vue'
const anzahl = ref(0)
</script>

<template>
  <button @click="anzahl++">Artikel im Warenkorb: {{ anzahl }}</button>
</template>

Hier erzeugt ref einen reaktiven Wert. Danach gibt die doppelte geschweifte Klammer im Template ihn aus. Erhöht der @click Handler den Wert, aktualisiert sich der Bildschirm von allein.

In einem echten Projekt käme diese Zahl wahrscheinlich von einem Server oder aus einem gemeinsamen Speicher. Trotzdem bleibt die Logik gleich: Sie ändern den Zustand, und Vue zeichnet den Bildschirm neu.

Für einen Test brauchen Sie zunächst ein Projekt mit Vue, und der nächste Abschnitt zeigt genau das. Außerdem probieren Sie Beispielcode auf Ihrem eigenen Rechner aus, nicht auf Ihrer Live Domain.

Wie starten Sie ein Projekt mit Vue?

Wer verstanden hat, was ist Vue JS, möchte es ausprobieren. Der offizielle Schnellstart empfiehlt, das Projektgerüst mit dem Werkzeug create-vue anzulegen. Zunächst installieren Sie die aktuelle stabile Version von Node.js. Die Mindestversion steht in der Dokumentation und ändert sich, daher nennen wir hier keine Zahl.

npm create vue@latest
cd mein-projekt
npm install
npm run dev

Bei der Einrichtung fragt das Werkzeug nach Optionen wie TypeScript, Vue Router, Pinia, Vitest, einer Lösung für Ende zu Ende Tests, ESLint und Prettier. Sind Sie unsicher, lassen Sie Unnötiges weg, denn Sie ergänzen es später.

Zum Veröffentlichen führen Sie npm run build aus. Der Befehl schreibt die optimierten Dateien in den Ordner dist. Quelle: Schnellstart von Vue.

Möchten Sie ganz ohne Build Schritt arbeiten, binden Sie Vue auch über ein CDN als einzelne Skriptdatei ein. Für kleine Interaktionen reicht dieser Weg. Allerdings sollten Sie bei wachsendem Projekt auf ein Build Werkzeug wechseln.

Wofür dienen Vue Router und Pinia?

Der Vue Kern liefert nur die Oberflächenschicht. Für eine Anwendung mit mehreren Seiten brauchen Sie daher zwei Zusatzpakete. Der Einrichtungsassistent bietet beide als Option an.

• Vue Router entscheidet anhand des Pfads in der Adresszeile, welche Komponente erscheint.
• Pinia hält Zustand, den viele Komponenten teilen, an einer Stelle, zum Beispiel Sitzungsdaten oder einen Warenkorb.

Sie müssen beides nicht am ersten Tag einbauen. Ein Rechner mit nur einem Bildschirm braucht zum Beispiel keinen Router. Ein Kundenportal mit mehreren Seiten braucht ihn dagegen fast immer.

Als Faustregel gilt: Wandert geteilter Zustand nur durch zwei oder drei Komponenten, genügt die Weitergabe von Daten zwischen ihnen. Verteilt sich der Zustand jedoch über mehrere Bildschirme, verringert Pinia das Durcheinander.

Für Leser ohne Programmierhintergrund gilt: Beide Pakete sind Bausteine, damit die Anwendung beim Wachsen nicht auseinanderfällt. Fragen Sie Ihr Team, warum jedes Paket nötig ist. Denn jedes zusätzliche Paket bringt später Wartungsaufwand mit.

Welche Einsatzarten unterstützt Vue?

Vue ist "progressiv", das heißt, dasselbe Wissen funktioniert in verschiedenen Architekturen. Die offizielle Dokumentation nennt sechs Einsatzarten. Die Tabelle fasst sie zusammen.

Quelle: Einsatzarten von Vue. Diese Flexibilität erlaubt es einem Team, in einem Projekt eine SPA und im nächsten eine statische Seite zu bauen. Zudem betont die Dokumentation, dass das Kernwissen über Vue in allen Fällen gilt.

Was ist Vue JS im Einsatz: Für Firmenseiten, Dashboards und SPAs?

Die praktische Antwort auf die Frage, was ist Vue JS, liegt darin, wo es Ihnen Vorteile bringt. Die folgende Liste ist eine allgemeine erste Einschätzung und keine Garantie.

• Admin Bereiche und Kundenportale: Vue passt gut, wenn Sie viele Formulare, Tabellen und Filter haben.
• Produktfilter und Live Suche: Vue lohnt sich, wenn sich die Oberfläche oft ändert und ohne Neuladen antwortet.
• Firmenseiten: Bei inhaltsstarken Seiten ist Vue allein kein Muss. Denken Sie stattdessen an SSR oder SSG.
• Schnelle Prototypen: Der Weg ohne Build Schritt erlaubt es, eine Idee rasch zu testen.

Zum Beispiel ist eine SPA für eine Firmenseite mit fünf Unterseiten meist mehr Aufwand als nötig. Baut dasselbe Team dagegen ein Händlerportal, spart Vue durch seine Komponenten echte Zeit.

Fällt Ihnen die Wahl der Architektur schwer, klären wir zunächst den Bedarf, entweder über unsere Webdesign Leistung oder über unsere individuelle Softwareentwicklung.

Wie unterscheidet sich Vue von React und Angular?

Alle drei Frameworks sind komponentenbasiert, und jedes hat ein reifes Ökosystem. Der Unterschied liegt vor allem im Ansatz und in den Gewohnheiten des Teams. Vue hält Templates nah an HTML und fördert eine schrittweise Einführung.

Den ausführlichen Vergleich von React und Angular haben wir im Vergleich von React und Angular beschrieben, deshalb wiederholen wir ihn hier nicht.

Für Vue genügt eine kurze Entscheidungshilfe:

• Erstens: Kennt Ihr Team HTML und CSS gut, erleichtert die Template Syntax das Lernen.
• Zweitens: Möchten Sie eine bestehende Seite Schritt für Schritt modernisieren, hilft das schrittweise Modell.
• Drittens: Gibt ein Firmenstandard schon Angular vor oder haben Sie eine React Codebasis, brauchen Sie einen starken Grund für den Wechsel.

Letztlich ist das beste Framework das, das Ihr Team kennt und das die Aufgabe verlangt. Wir raten Ihnen, auf die Wartungskosten zu achten und nicht auf Framework Streit. Denn die Wahl ist leicht, die jahrelange Pflege dagegen ist der eigentliche Aufwand.

Wie baut man mit Vue schnell einen Produktfilter?

Ein Produktfilter ist eines der Beispiele, in denen Vue glänzt. Mehrere Teile des Bildschirms ändern sich nämlich oft: die gewählten Filter, die Produktliste, die Trefferzahl und die Sortierung. Alle stammen aus denselben Daten.

In Vue trennen Sie diese Teile so:

1. Erstens wird das Filterfeld eine Komponente und meldet die Auswahl nach oben.
2. Zweitens wird die Produktliste eine eigene Komponente und zeigt das gefilterte Array.
3. Drittens definieren Sie das gefilterte Array als berechneten Wert aus den Rohdaten.

Dank dieser Struktur bedeutet ein neuer Filter nur die Änderung einer einzigen Komponente. Eine Warnung gehört dazu: Schreiben Sie die Filterlogik getrennt für Server und Browser, können beide Seiten mit der Zeit auseinanderlaufen. Entscheiden Sie daher zuerst, wo welche Daten gefiltert werden.

Ist die Sichtbarkeit Ihrer Produktseiten in der Suche wichtig, planen Sie auch die Adressen der Filterergebnisse. Zur Geschwindigkeit im Shop lesen Sie Ladezeit im Onlineshop und Umsatz.

Ist Vue JS gut für SEO? Indexiert Google Vue Seiten?

Ja, Google verarbeitet Seiten, die mit JavaScript arbeiten. Google Search Central beschreibt drei Phasen: Crawling, Rendering und Indexierung. Der Rendering Schritt läuft allerdings zeitversetzt nach dem Crawling ab.

Dasselbe Dokument betont außerdem, dass serverseitiges Rendering oder Pre Rendering weiterhin eine gute Idee ist. Es macht Ihre Website für Nutzer und Crawler schneller, und nicht jeder Bot führt JavaScript aus. Quelle: Grundlagen zu JavaScript und SEO bei Google.

Daher prüfen Sie bei einer Seite mit Vue diese Punkte:

• Erstens nutzen Sie für Links echte a Elemente mit einem href Attribut.
• Zweitens routen Sie über die History API auf echte Adressen, nicht über Fragment Adressen wie #/produkte.
• Drittens liefern Sie bei fehlenden Seiten vom Server einen 404 Status oder setzen auf der Fehlerseite ein noindex.

Ihre Meta Tags bereiten Sie mit unserem Meta Tag Generator vor.

Wann brauchen Sie SSR, und welche Rolle spielt Nuxt?

Bei SSR rendern Sie Komponenten auf dem Server zu HTML, senden sie an den Browser und machen sie dort per Hydration interaktiv. Die Vue Dokumentation nennt drei Vorteile: schnellerer Zugriff auf den Inhalt, ein einheitliches Denkmodell und besseres SEO.

Es gibt auch Kosten. Erstens läuft browserspezifischer Code nur in bestimmten Lebenszyklus Hooks. Zweitens brauchen Sie für die Bereitstellung einen Node.js Server statt statischem Hosting. Zudem belastet Rendering bei jeder Anfrage die CPU stärker als statische Dateien, und es verlangt eine Caching Strategie.

Für Produktionsanwendungen empfiehlt die Dokumentation übergeordnete Frameworks wie Nuxt, statt SSR von Grund auf zu bauen. Nuxt behandeln wir in einem eigenen Artikel. Quelle: SSR Leitfaden von Vue.

Wie wirkt sich Vue auf die Ladezeit Ihrer Seite aus?

Vue allein macht eine Seite weder schneller noch langsamer. Vielmehr entscheiden Architektur und Codequalität über das Ergebnis. Bei einer SPA lädt der Browser zuerst JavaScript herunter und führt es aus, dann erst baut er den Inhalt auf. Folglich kann der erste Aufruf verzögert sein.

Die Seite der Vue Dokumentation zu den Einsatzarten nennt serverseitig gerendertes HTML als Hilfe für Core Web Vitals wie den Largest Contentful Paint (LCP). Daher passen SSR oder SSG meist besser zu inhaltsstarken Seiten.

Bei der Geschwindigkeit helfen diese Schritte der Reihe nach:

1. Erstens entfernen Sie unnötige Abhängigkeiten und halten das Paket klein.
2. Zweitens laden Sie schwere Komponenten erst bei Bedarf.
3. Drittens liefern Sie Bilder in passender Größe und passendem Format aus.
4. Schließlich messen Sie das Ergebnis, statt zu raten. Testen Sie auf dem Handy und am Desktop.

Zum Messen lesen Sie unseren Leitfaden zum Lighthouse Test für die Website Performance. Für das große Bild helfen zudem die Artikel JavaScript Ladezeit optimieren und Ladezeit und SEO.

Wo hosten Sie eine Vue Anwendung, und wie wählen Sie das Hosting?

Das Hosting hängt von Ihrer Architektur ab. Ein Projekt als SPA oder mit SSG besteht am Ende aus statischen Dateien im Ordner dist. Diese legen Sie auf klassisches Hosting oder auf statisches Hosting. Nutzen Sie dagegen SSR, brauchen Sie einen laufenden Node.js Prozess.

Stellen Sie bei der Wahl diese Fragen. Erstens: Kann ich auf dem Server Node.js ausführen? Zweitens: Kann ich eine Weiterleitungsregel für das Routing setzen? Drittens: Wer verwaltet SSL und Backups?

Für die Hosting Entscheidung sammelt unser Leitfaden Webhosting auswählen die Kriterien. Zum Zertifikat lesen Sie Was ist ein SSL Zertifikat. Nach dem Livegang prüfen Sie die Einstellungen mit der DNS Abfrage und dem SSL Check.

Ein ehrlicher Hinweis: Gehören Servereinrichtung, Sicherheitsupdates und Backups nicht zu Ihrem Fachgebiet, überlassen Sie sie Ihrem Hosting Anbieter. Wir sind ein Team für digitales Marketing und Web, kein Hosting Unternehmen.

In welchen Fällen sollten Sie Vue nicht einsetzen?

Nicht jede Aufgabe braucht Vue. In den folgenden Fällen ist eine schlichtere Lösung oft besser.

• Erstens: Hat die Seite fast keine Interaktion, genügen reines HTML und CSS.
• Zweitens: Pflegen Redakteure ohne Technikkenntnisse die Inhalte, senkt ein fertiges Content Management System den Wartungsaufwand.
• Drittens: Kennt niemand im Team JavaScript, kann der Aufwand den Nutzen übersteigen.
• Viertens: Müssen Sie sehr alte Browser unterstützen, passt Vue 3 nicht.

Zum letzten Punkt ist die Dokumentation klar: Vue 3 zielt auf Browser mit nativer ES2016 Unterstützung und schließt IE11 aus. Quelle: FAQ von Vue.

Zudem kann bei inhaltsstarken Seiten, für die SEO entscheidend ist, eine SPA mit reinem Rendering im Client allein eine schwache Wahl sein. In solchen Fällen kombinieren Sie sie besser mit SSR oder SSG.

Sind Sie unsicher, starten Sie mit einer kleinen Testseite und skalieren die Investition danach. So prüfen Sie Ihre Idee, ohne sich monatelang an eine falsche Architektur zu binden.

Müssen Sie von Vue 2 auf Vue 3 wechseln?

Für ein neues Projekt stellt sich die Frage nicht: Sie starten mit Vue 3. Bei einem älteren Projekt sieht es anders aus. Laut der offiziellen FAQ hat Vue 2 am 31. Dezember 2023 das Ende der Lebensdauer (EOL) erreicht. Für Teams mit weiterem Bedarf gibt es eine erweiterte LTS Option.

In der Praxis heißt das: Vue 2 Projekte bekommen keine neuen Funktionen, und Sicherheitskorrekturen sind begrenzt. Folglich lohnt es sich, bei einem lebenden Produkt die Migration zu planen.

Um die Migration klein zu halten, gehen Sie in dieser Reihenfolge vor:

1. Zunächst listen Sie Abhängigkeiten und Erweiterungen auf und suchen jene ohne Vue 3 Version.
2. Danach erhöhen Sie die Testabdeckung, denn Tests sind Ihr Sicherheitsnetz beim Wechsel.
3. Dann folgen Sie dem offiziellen Migrationsleitfaden Schritt für Schritt.
4. Schließlich probieren Sie kritische Abläufe vor dem Livegang auch von Hand aus.

Berücksichtigen Sie bei der Kostenschätzung die Erfahrung Ihres Teams. Haben Sie kein Entwicklerteam, kann es günstiger sein, die Arbeit als geplantes Projekt einzukaufen. Außerdem senkt es Risiko und Überraschungen, wenn Sie den Wechsel in kleine Teile zerlegen.

Welchen Weg gehen Sie, um Vue zu lernen?

Um Vue zu lernen, brauchen Sie zuerst HTML, CSS und grundlegendes JavaScript. Die Dokumentation beschreibt diese drei als den Boden, auf dem Vue steht. Ist der Boden schwach, verlangsamt sich das Lernen des Frameworks.

Wir empfehlen diese Reihenfolge:

1. Zunächst grundlegendes JavaScript: Variablen, Funktionen, Arrays und Ereignisse.
2. Danach Versionsverwaltung mit Git. Unsere Anleitung zu Git und GitHub erklärt die wichtigsten Befehle.
3. Dann das offizielle Vue Tutorial und ein kleines Projekt.
4. Schließlich TypeScript als zweiten Schritt. Unser Vergleich von TypeScript und JavaScript hilft bei der Entscheidung.

Wissen Sie nicht, mit welcher Sprache Sie beginnen sollen, lesen Sie Welche Programmiersprache soll ich lernen.

Ein echtes Minimalprojekt, etwa ein kleiner Rechner oder eine gefilterte Liste, lehrt schneller als Videos. Zudem wird jedes fertige Minimalprojekt zu einem konkreten Beispiel für ein Bewerbungsgespräch oder einen Kundentermin.

Welche Entscheidungen treffen Sie vor dem Start eines Vue Projekts?

Einige Entscheidungen vor dem ersten Code ersparen Ihnen teure Korrekturen. Geschäftsführung und Entwickler gehen diese Liste am besten gemeinsam durch.

• Erstens: Müssen die Seiten über die Suche auffindbar sein? Dann planen Sie SSR oder SSG ein.
• Zweitens: Wer aktualisiert die Inhalte, und mit welchem Werkzeug?
• Drittens: Brauchen Sie Anmeldung und Berechtigungen?
• Viertens: Unterstützt die Hosting Umgebung Node.js?
• Fünftens: Wer wartet das Ganze, und wie oft?

Die Antworten bestimmen die Architektur fast von allein. Eine Kategorieseite für Suchtraffic und ein Dashboard für angemeldete Nutzer verlangen zum Beispiel ganz unterschiedliche Lösungen.

Sind Sie bei SEO unsicher, erstellt unsere SEO Beratung eine technische Checkliste. So schließen Sie eine ungeeignete Architektur aus, bevor die Entwicklung beginnt.

Schließlich schreiben Sie auch den Plan für Backup und Rückkehr früh auf. Ein guter Einstieg ist unser Artikel zur Website Backup Strategie.

In welchem Verhältnis stehen Vue und Nuxt?

Nuxt ist ein übergeordnetes Framework auf Basis von Vue. Vue liefert die Oberflächenschicht, Nuxt dagegen fertige Entscheidungen zu Routing, serverseitigem Rendering und Projektstruktur. Auch die Vue Dokumentation empfiehlt solche Frameworks für Produktionsprojekte mit SSR.

Die Regel ist einfach. Für Aufgaben ohne Bedarf an Sichtbarkeit in der Suche, etwa ein Dashboard oder ein Rechner, genügt Vue. Für Inhaltsseiten und Onlineshops, die Besucher aus Suchmaschinen erwarten, prüfen Sie dagegen ein Framework wie Nuxt.

Die Details von Nuxt wiederholen wir hier nicht. Stattdessen behandeln wir in unserem Schwesterartikel dateibasiertes Routing und die Rendering Modi.

Bauen Sie einen Onlineshop, denken Sie technische Architektur und Geschäftsziele zusammen. Unsere E-Commerce Beratung unterstützt Ihr Team bei dieser Entscheidung.