Material Design in Vue verwenden: Welche Bibliothek gefällt euch am besten?

Vue.js & Material Design: Eine Designsprache, viele Bibliotheken
Keine Kommentare

Material Design ist beliebt, Vue.js ist ebenfalls. Was liegt näher, als beide Trends zu vereinen? Genau das tun zahlreiche Bibliotheken: Vuetify, Material Components Vue und zahlreiche weitere Optionen stehen zur Verfügung. Wir stellen einige davon vor.

Vuetify ist inzwischen wohl recht bekannt in der Vue-Welt. Immerhin hat die Bibliothek über 20.000 Sterne auf GitHub und bietet eine große Auswahl an Komponenten im Stil der Designsprache Material Design von Google an. Kürzlich erschien Version 2.0 und aktualisierte die Bibliothek auf die 2. Version der Designsprache selbst. Schaut man sich auf GitHub um, findet man allerdings noch viele weitere Optionen für die Kombination von Vue und Material Design. Das liegt an der Beliebtheit der Designsprache selbst.

Material Design: Physische Philosophie

Material Design hat sich in den vergangenen Jahren rasant im Web ausgebreitet. Zu den Grundlagen des Stils gehört die Idee, dass Prinzipien aus dem klassischen Design physischer Produkte in die digitale Welt übernommen werden. Als Ziel für den Designstil definiert Google unter anderem die Vereinheitlichung der User Experience über verschiedene Plattformen hinweg. Konkret orientiert sich das Layout an Licht- und Schattenwürfen physischer Objekte, um Ebenen und Abhängigkeiten im digitalen Raum zu visualisieren. Auch Bewegung ist ein wichtiger Faktor für ein gelungenes Material Design. Animationen dienen der Aufmerksamkeitssteuerung, aber auch der Kommunikation. Verändert sich etwas am angezeigten Inhalt, wird der Übergang visualisiert, sodass der Nutzer bemerkt und versteht, was passiert.

JavaScript Days 2019

JavaScript Testing in der Praxis (Teil 1 + 2)

mit Dominik Ehrenberg (Crosscan) und Sebastian Springer (MaibornWolff)

Fortgeschrittene schwarze Magie in TypeScript

mit Peter Kröner (‚Webtechnologie-Erklärbär‘)

Auch das inzwischen in vielen Apps sichtbare sofortige Feedback für Interaktionen mit der App – visualisiert beispielsweise durch eine kurze graue Hinterlegung des berührten Elements – ist typisch für das Material Design, ebenso der zumeist runde „Floating Action Button“ (FAB), der in einer Ecke der App über dem Inhalt schwebt und jederzeit nutzbar ist. In der zweiten Fassung der Designsprache legte Google großen Wert darauf, die Individualisierbarkeit von Material-Design-Stilen zu betonen. Es handele sich eher um eine Philosophie als um konkrete Vorgaben dazu, wie eine App auszusehen hat. Die Sprache wird kontinuierlich weiter entwickelt.

Viele Optionen mit Vuetify

Diese Designphilosophie wurde in verschiedenen Auslegungen und unterschiedlichem Umfang in Bibliotheken integriert, mit denen sich das Material Design ganz einfach in Anwendungen einfügen lassen soll. Vuetify stellt eine der umfassenderen Lösungen dar und bringt neben den immer vorhandenen Grund-Komponenten wie Slidern, dem FAB und Cards beispielsweise die sogenannten Sparklines mit, mit denen Graphen zur Datenvisualisierung erstellt werden können. Auch im Bereich der Animationen stehen hier zahlreiche Optionen zur Verfügung, die über die Basics hinaus gehen. So kann beispielsweise ein Sprung innerhalb der Seite mit einem programmatischen Scrollverhalten versehen werden, bei dem der Nutzer nachverfolgen kann, dass er keine neue Seite öffnet, sondern innerhalb derselben Seite weiter auf eine andere Stelle geleitet wird.

Auch interessant: Vue.js Tutorial: Einführung in das JavaScript-Framework

Vuetify kann per Vue CLI in Projekte integriert werden und ist kompatibel mit der Nutzung zusammen mit anderen Vue-Plug-ins inklusive Nuxt.js, Electron sowie der Verwendung in PWAs und als native mobile App mit Cordova. Die Bibliothek steht unter MIT-Lizenz, bietet aber auch kostenpflichtige Premium-Funktionen und -Themes an.

Wer noch einen Schritt weiter gehen und mit nur einem Tool alle Plattformen bedienen, aber trotzdem Vue mit Material Design kombinieren möchte, kann einen Blick auf Quasar werfen. Das Quasar Framework ist im Juli in Version 1.0 erschienen und bietet Support für Single Page Applications, Server-Side Rendering, PWAs, hybride mobile Apps und Electron Apps auf Basis von Vue. Auch hier wurde als Designsprache das Material Design 2 gewählt. Für kleine Projekte könnten diese zwei Optionen allerdings bereits zu schwergewichtig sein.

Kleine Projekte – die passende Bibliothek

Auch dafür stehen im Vue-Universum jedoch Optionen bereit. In der Bibliothek Material Components Vue hat Entwickler Mats Pfeiffer mit einfachen Web Components gearbeitet, um die Designsprache ins Framework zu integrieren. Auch diese Bibliothek bietet Support für Server-Side Rendering und wurde erst kürzlich aktualisiert. Installiert werden kann Material Components Vue über npm: npm install --save material-components-vue.

BalmUI stellt ebenfalls eine Option zur Integration des Material Designs in Vue dar, die erst einmal ohne großen Overhead auskommt und auf das wesentliche fokussiert ist. Hier finden sich Ergänzungen in weiteren Balm-Bibliotheken, die für zusätzliche Funktionen verwendet werden können, allerdings nicht zwangsläufig ebenfalls auf Material Design beruhen.

Auch darüber hinaus stehen natürlich viele weitere Optionen zur Integration des Material Design in Vue.js zur Verfügung, beispielsweise Vue Material oder das in China entwickelte Muse-UI. Welche Bibliothek bevorzugt ihr?

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -