Vuetify bringt das Material Design zu Vue

Vuetify: Ein Material-Design-Framework für Vue
Keine Kommentare

Vuetify ist ein Komponenten-Framework, das Googles Material Design Standards für Vue-Anwendungen verfügbar macht. Inzwischen ist das Framework bei Version 1.0 angelangt.

Das Material Design von Google ist inzwischen zu einer Art Standard unter den Design-Schulen geworden: Klare Linien, nachvollziehbare Animationseffekte für Veränderungen auf dem Bildschirm und der notorische Floating Action Button, der über allem schwebt und somit jederzeit verwendbar ist. Das Design von Apps soll möglichst nah an haptischen, physischen Objekten und ihren Bewegungsabläufen sein, um dem Nutzer die Interaktion im virtuellen Raum zu erleichtern. Auch Microsoft hat diese Idee inzwischen aufgegriffen und in einen eigenen Designstandard gefasst, das Fluent Design. Am Ende unterscheiden sich die zwei Designrichtungen zwar in der jeweiligen Ausführung, teilen sich aber doch die Grundideen der Haptik und Nachvollziehbarkeit.

Vuetify 1.0 erschienen

Insofern ist es wenig verwunderlich, dass zahlreiche Libraries und Frameworks für das Material Design existieren. Sogar unter iOS-Entwicklern findet das Material Design von Google Fans, sodass es Adaptionen für die konkurrierende Mobile-Plattform gibt. Und natürlich geht es schon lange nicht mehr nur um den Mobile-Bereich: Zuerst mit dem Material Design Lite, inzwischen fest in die Kern-Library integriert, bietet Google selbst eine Implementierung des Material Designs für das Web an.

Auch in diversen Web-Frameworks und -Libraries kann problemlos zusätzlich mit dem Material Design gearbeitet werden. Dafür stehen zahlreiche eigens entwickelte Tools zur Verfügung, die die Designrichtung für die jeweilige Plattform adaptieren. Für Vue.js ist mit Vuetify nun ein weiteres Framework dazu gekommen. Vuetify ist ein semantisches Komponenten-Framework, das mehr als 80 Komponenten mitbringt, die dem Material-Design-Standard entsprechen. Außerdem stehen acht vorgefertigte vue-cli Templates zur Verfügung. Das Framework unterstützt Chrome, Firefox, Edge, Safari ab Version 10, sowie den Internet Explorer 11 und Safari 9 mit Polyfills. Ältere Versionen des Internet Explorers werden  nicht unterstützt.

Vuetify in der Sandbox testen

Vuetify steht grundsätzlich unter MIT-Lizenz, kann also kostenlos verwendet werden. Das Projekt wird auf GitHub entwickelt. Im Bereich der vorgefertigten Themes steht neben zwei kostenlosen Optionen aber auch ein kostenpflichtiges Premium-Theme zur Wahl. Auf der Website des Projekts werden die verschiedenen UI-Komponenten und anderen Funktionen des Frameworks ausführlich beschrieben. Zu den zuletzt hinzugekommenen Komponenten gehören der Data Iterator und Jumbotrons, eine flexible Call-to-Action-Komponente. Für das Layout steht neben verschiedenen vordefinierten Standards außerdem eine Sandbox zur Verfügung, in der das Framework ausprobiert werden kann.

Außerdem steht auf CodePen ein Quick-Start-Projekt bereit, das die Basis für eine Vuetify-App liefert. Vuetify kann via npm bezogen werden: npm install vuetify. Inzwischen hat das Framework Version 1.0.2 erreicht; zwei Bugfix-Updates für Version 1.0 liegen bereits vor. Für das Quartal 2.2018 kündigt die Roadmap zum Projekt außerdem ein neues Front-end-Pack und ein neues Back-end-Pack mit jeweils 10 neuen Komponenten für Vuetify an.

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -