Zusammen bilden Vue.js und Nuxt ein leistungsstarkes Duo für die moderne Webentwicklung. Sie ermöglichen es Entwicklern, schnell skalierbare und wartbare Anwendungen zu erstellen. Erfahre in diese Blogpost warum.

Was ist Vue.js?

Die erste Version von Vue.js ist im Jahr 2014 erschienen. Ähnlich wie ReactJS fokussiert Vue.js sich darauf, ein Entwicklungsgerüst (Framework) für reaktive Anwendungen zur Verfügung zu stellen. Vue.js befindet sich mittlerweile in Version 3, es hat stark an Reife gewonnen und wird von Unternehmen wie Google, Netflix, Facebook und Adobe eingesetzt.

Schlüsselfunktionen von Vue.js:

Das Vue.js Logo

Beliebtheit und Community:

Das Vue.js Projekt zählt mittlerweile über 16.000 Follower wohingegen der alte Platzhirsch React mit nur knapp 5.000 Followern abgeschlagen wirkt. Vue. Im Gegensatz zu den Frameworks Angular (Microsoft) und React (Meta) wird Vue.js von einer unabhängigen Community von freien Entwicklern vorangetrieben.

Einführung in Nuxt

Nuxt ist ein SSR-Framework (Serverseitiges Rendern), welches auf Vue.js aufbaut. Vue.js selbst ist dafür konzipiert, im Browser Anwendungen zu entwickeln. Nuxt nimmt Vue.js als Grundlage und ermöglicht die Generierung HTML und Vue.js Strukturen auf der Serverseite.

Was Serverseitiges Rendering (SSR)?

Mithilfe des SSR wird der gesamte DOM - sprich die Struktur des HTML - bereits auf dem Webserver erzeugt und direkt an den Browser ausgeliefert. Dieser spart somit zum einen Rechenleistung, zum anderen sind alle Informationen, welche für Suchmaschinen relevant sind (SEO) auch bereits im HTML enthalten. Während in einer reinen Vue.js Anwendung relevante Daten asynchron, bzw. nachträglich geladen werden können, sorgt Nuxt dafür, dass diese Daten zur Zeit des Abrufs der Seite bereits zur Verfügung stehen.

Das Nuxt Logo

Weitere wichtige Features:

Vorteile der Verwendung von Vue.js & Nuxt

Performance und Skalierbarkeit

Mit der Verwendung von Vue.js sowie Nuxt ist es einfach möglich, die physische (Datei)Größe von Webseiten zu verringern, bzw. diese zu modularisieren und smart zu laden. Dadurch ergeben sich maßgebliche Performance-Potentiale. Ebenfalls eine Skalierung, beispielsweise über Kubernetes, ist einfach möglich, da die Applikationen sich einfach in Container packen lassen.

Flexibilität und Anpassbarkeit

Durch den progressiven Aufbau beider Frameworks kann zur Entwicklungszeit mit einem minimalen Set an Basisfunktionen gestartet werden. Kommen neue Anforderungen hinzu, lassen sich einfach neue Module einfügen und somit die Funktionalität problemlos erweitern.

SEO-Optimierung

Mithilfe von Nuxt Server-Side-Rendering lassen sich reaktive, benutzerfreundliche Applikationen mit einem starken SEO-Fokus erstellen. Extrem gute Web-Vitals, hervorragende Crawlbarkeit für Suchmaschinen, kurze Ladezeiten und smarte Logiken zum Laden von Inhalten sind nur die Spitze des Eisberges der SEO-Vorteile für Applikationen, welche auf Nuxt basieren.

Entwicklungsfreundlichkeit

Vue.js sowie auch Nuxt haben eine sehr steile Lernkurve. Die Dokumentationen sind hervorragend und lassen so auch fremde Entwickler schnell einsteigen. Beide Projekte kommen mit eigenen Dev-Tools Erweiterungen, welche es Entwicklern ermöglichen, schnell tiefgreifende Einblicke in die Applikationen zu gewinnen.

Praxisbeispiele und erfolgreiche Projekte

Projektbeispiele

Wenn es darum geht, benutzerfreundliche, interaktive Frontends zu bauen, setzen wir bei Blueshoe i.d.R. auf Vue.js und Nuxt. Ob im Onlineshop von Luma Delikatessen, der Unternehmenswebsite von Winter & Company oder dem digital.learning.lab - die beiden Frameworks haben sich immer als hervorragende Wahl herausgestellt.

Fallstudien

Insbesondere im Webshop des schweizer Online-Fleischhändlers Luma Delikatessen hat sich Nuxt bewährt. Hervorragende Crawlbarkeit, eine starke Interaktivität, schnelle Antwortzeiten in Kombination mit modernem Design machen das Einkaufserlebnis auf luma-delikatessen.com zu einer puren Freude. Mithilfe von Nuxt hat Blueshoe interaktive Produktansichten mit intuitiver Bedienung geschaffen, Produktinformationen geschickt angeordnet und einfache Indizierbarkeit für alle Suchmaschinen sichergestellt.

Wie sieht eine Implementierungsstrategie aus?

Best Practices

Um ein Projekt mit Vue.js oder in Kombination mit Nuxt aufzusetzen, empfiehlt es sich, die Command-Line-Interfaces (CLIs) der beiden Frameworks zu verwenden. Diese bringen bereits einfach konfigurierbare Projekt-Templates mit. Wir empfehlen TypeScript als Sprache, da eine starke und konsistente Typisierung langfristig simple Bugs verhindert und Kosten spart. Des Weiteren empfiehlt sich die Konfiguration von eslint als Linter und Prettier zur Formatierung des Projektes.

Schritt-für-Schritt-Anleitung

Häufige Herausforderungen

Eine häufige Herausforderung in der Arbeit mit Nuxt ist die Unterscheidung zwischen client- und serverseitiger Ausführung von Code. Der Entwickler muss sich stets bewusst sein, in welchem Kontext der Code ausgeführt wird. So gibt es auf der Serverseite beispielsweise kein window oder document Objekt - da diese lediglich im Browser existieren. Ebenso lässt sich die Ausführung bestimmter Codestellen einfach auf Server- oder Clientseite begrenzen, beispielsweise durch die ClientOnly Komponente.

Warum Blueshoe als Partner für Vue.js & Nuxt?

Unsere Expertise

Nach der Umsetzung von zahlreichen Projekten mit Vue.js 2 Nuxt 1 sowie dem Übergang unserer Bestands Projekte auf Vue.js 3 sowie Nuxt 2 ist Blueshoe der Ansprechpartner für die Entwicklung von Frontends mit den genannten Frameworks. Wir kennen die Strukturen der Technologien wie unsere Westentasche, sind mit den Modulen und zusätzlichen Pakete äußerst vertraut und können uns schnell in bestehenden Projekten zurechtfinden.

Fazit

Mit der stark-steilen Lernkurve von Vue.js und Nuxt, dem progressiven Ansatz beider Frameworks und der Vielseitigkeit in deren Einsatz lassen sich sowohl einfache als auch komplexe moderne Web-Anwendungen bauen. Ob SEO, Performance, UX - alle Anforderungen an moderne Webprojekte lassen sich mit den beiden Technologien bewerkstelligen.

Können wir bei deinem Projekt mit unserer Expertise in Frontend-Technologien behilflich sein? Kontaktiere uns einfach unter frontend@blueshoe.de.