Das Aufkommen neuer Frameworks für die visuelle Komponentenkapselung in Webanwendungen hat verschiedene andere Bedürfnisse hervorgehoben: Routing, Sicherheit, SPA- und PWA-Unterstützung, Internationalisierung und natürlich UI. Das gilt auch für Vue.js, das in den letzten Jahren eine große Community gewonnen hat und vor allem für die Webentwicklung und hybride mobile Anwendungen weit verbreitet ist. Obwohl der Schwerpunkt von Vue.js auf der Komponentenlogik und der Anwendung als Ganzes liegt, erspart man sich damit leider nicht mit einer anderen UI-Bibliothek oder einem Framework zu arbeiten.
Es gibt unter den zahlreichen UI-Frameworks, die sich mit der Anpassung und Erleichterung visueller Komponenten und des Bildschirmdesigns befassen, Frameworks, die den berühmten Material Design-Standard übernommen haben. Die Community hat diese Option weithin akzeptiert, da sie sowohl die Desktop- als auch die mobile Welt mit ihrer Reaktionsfähigkeit, Flexibilität und Erweiterbarkeit einbezieht. Da die meisten Entwickler damit vertraut sind, hat man sich die Frage gestellt: Warum nicht den Materialize-Trend und Vue.js verbinden?

Was ist Vuetify?

Vuetify ist ein vollständiges UI-Framework, dass auf Vue.js aufbaut und entspricht der Material Design (MD) Spezifikation. Das bedeutet, dass die Kernfunktionen sowohl von Vue als auch von Material standardmäßig zur Verfügung stehen und von beiden Communities verbessert werden können. Das Ziel ist es, den Entwicklern Werkzeuge bereitzustellen, um reichhaltige und ansprechende Designs und Benutzererlebnisse zu erstellen. Vuetify ist einfach zu erlernen und stellt Hunderte von sorgfältig ausgearbeiteten Komponenten aus der MD-Spezifikation bereit. Es unterstützt alle modernen Browser und ist kompatibel mit Vue CLI-3. Es bietet auch grundlegende Vorlagen für Simple HTML, Webpack, NUXT, PWA, Electron, A La Carte, Apache Cordova.
Allerdings bedeutet das natürlich auch, dass man sich mit Vuetify dem MD annehmen muss. Wenn man eine App ausschließlich für IOS entwickelt oder sich komplett auf das eigene Design verlassen muss, ist Vuetify nicht die richtige Entscheidung. Also auch bei Vuetify bleibt die Regel gleich, zuerst die Anforderungen des Projekts analysieren, dann das UI-Framework auswählen.

Installation:

Es gibt mehrere Varianten Vuetify zu installieren. Ich werde einen Weg im folgenden Kapitel erklären, die restlichen findet man unter https://vuetifyjs.com/en/getting-started/installation/.

Nachdem man ein instanziiertes Projekt erstellt hat, kann man das Vuetify Vue CLI-Paket mit dem cli hinzufügen. Mit:

                vue add vuetify

Zusammengefasst:

Vuetify ist ein wiederverwendbares semantisches Komponenten-Framework für Vue.js, das darauf abzielt, saubere, semantische und wiederverwendbare Komponenten bereitzustellen. Viele Faktoren müssen berücksichtigt werden, wenn man mit einem neuen Framework beginnt. Der Vorteil von Vuetify ist, dass viele der Vor- und Nachteile bereits von Vue selbst absorbiert wurden. Darüber hinaus muss man die tatsächlichen Bedürfnisse eines Projekts analysieren. Wie bereits erwähnt, ist Vuetify möglicherweise nicht für ein Projekt geeignet, das sich auf ein Design selbst verlässt. Wenn dies jedoch der Fall ist, hat man ein produktives und äußerst leistungsfähiges Werkzeug zur Hand, um beeindruckende Webseiten zu erstellen. Wer sich für Vuetify interessiert, kann sich einen Überblick über sämtliche Komponenten, Styles, Animationen etc. auf https://vuetifyjs.com/en/introduction/why-vuetify/ verschaffen.