Vue.js, Nuxt.js

Ist Vue.js / Nuxt.js das richtige Frontend-Framework für meine Web-/Mobile-Lösung?

Bei der Entwicklung von modernen Web-Frontends kommt man um den Einsatz von professionellen Javascript Frameworks kaum noch herum, wenn man effizient und zukunftssicher sein will.

In den letzten Jahren haben sich im Open-Source Bereich 3 Frameworks (React, Angular und Vue.js) etabliert, welche alle drei den Anforderungen an die moderne Webentwicklung gerecht werden.

Der Entscheid für den flächendeckenden Einsatz von Vue.js in unseren Projekten (E-Commerce, CMS und Individualentwicklung) fiel uns nach einer längeren Evaluation aller drei Frameworks leicht:

Vue.js:

ist einfach zu lernen
lässt sich als einziges Framework problemlos in jedes Webframework integrieren - angefangen bei Typo3 und Wordpress, über Magento und Shopware bis hin zu beliebigen individualentwicklungen.
ermöglicht die Entwicklung von stabilen und performanten Oberflächen unter nutzung beliebiger CSS Frameworks sowohl für Desktop- als auch für Mobile-Anwendungen.

Nuxt.js:

ist "Vue.js on Steroids"
erweitert und bündelt viele Vue.js Features und vereinfacht die Entwicklung von headless Web-Apps
macht Ihre Anwendungen progressiv (PWA)
ist der ideale Frontend-Partner für eine Individualentwicklung mit einem REST-basierten Laravel Backend.

Features im Überblick

Vue.js

Virtuelles DOM: VueJS verwendet virtuelles DOM. Die Änderungen werden nicht am DOM vorgenommen, sondern es wird eine Replik des DOM erstellt, die in Form von JavaScript-Datenstrukturen vorliegt . Wenn Änderungen vorgenommen werden sollen, werden diese an den JavaScript-Datenstrukturen vorgenommen und letztere mit der ursprünglichen Datenstruktur verglichen. Die endgültigen Änderungen werden dann auf das reale DOM aktualisiert, was wesentlich performanter ist, als direkte DOM Änderungen.
Datenbindung: Die Datenbindungsfunktion hilft dabei, HTML-Attribute zu bearbeiten oder Werte zuzuweisen, den Stil zu ändern und Klassen mithilfe der mit VueJS verfügbaren Bindungsanweisung v-bind zuzuweisen.
Routing: Die Navigation zwischen den Seiten erfolgt mit Hilfe des Vue-Routers.
Komponenten: Komponenten sind eine der wichtigen Funktionen von VueJS, mit deren Hilfe benutzerdefinierte Elemente erstellt werden können, die in HTML wiederverwendet werden können.
Eventhandling: v-on ist das Attribut, das den DOM-Elementen hinzugefügt wird, um die Ereignisse in VueJS abzuhören.
Transitions: VueJS bietet verschiedene Möglichkeiten, den Übergang auf HTML-Elemente anzuwenden, wenn diese zum DOM hinzugefügt / aktualisiert oder aus dem DOM entfernt werden. VueJS verfügt über eine integrierte Übergangskomponente, die für den Übergangseffekt um das Element gewickelt werden muss. Wir können problemlos Animationsbibliotheken von Drittanbietern hinzufügen und der Benutzeroberfläche mehr Interaktivität hinzufügen.
Vorlagen: VueJS bietet HTML-basierte Vorlagen, die das DOM mit den Vue-Instanzdaten verbinden. Vue kompiliert die Vorlagen in virtuelle DOM-Renderfunktionen. Wir können die Vorlage der Renderfunktionen verwenden und müssen dazu die Vorlage durch die Renderfunktion ersetzen.
Anweisungen: VueJS verfügt über integrierte Anweisungen wie v-if, v-else, v-show, v-on, v-bind und v-model, mit denen verschiedene Aktionen im Frontend ausgeführt werden.
Leichtgewichtig: VueJS-Skript ist sehr leicht und die Leistung ist auch sehr schnell.
Vue-CLI: VueJS kann über die Befehlszeilenschnittstelle vue-cli in der Befehlszeile installiert werden. Es hilft, das Projekt einfach mit vue-cli zu erstellen und zu kompilieren.