Vue-Anwendungen verschönern mit Vuetify

Das JavaScript-Framework Vue.js, Teil 10 Vue-Anwendungen verschönern mit Vuetify

21.06.2022 Von Dr. Dirk Koller

Vue.js nimmt Web-Developern viel Arbeit ab, allerdings nicht beim User Interface Design. Wer alleine auf HTML und CSS setzt, muss viel Hand anlegen. Einfacher geht es mit der UI-Bibliothek Vuetify.

Vuetify steht als installierbares Plug-in für das Vue-Framework zur Verfügung.
(Bild: Vuetify)

Vuetify ähnelt anderen Komponentenbibliotheken wie Bootstrap oder Material, enthält aber fertig einsetzbare Vue-Komponenten. Das Einbinden von Vuetify geschieht am einfachsten mithilfe des Vue CLI. Im Assistenten sind für dieses Beispiel Vue 2 und Router auszuwählen. Für Vue 3 existiert derzeit noch eine Beta-Version der Bibliothek, die noch nicht für den produktiven Einsatz geeignet ist.

vue create vuetifulapp
cd vuetifulapp
vue add vuetify   // Preset "Default" im Wizard auswählen

Webanwendung mit integrierter Vuetify-Bibliothek.
(Bild: Koller)

Das CLI fügt dem Projekt dabei das Plug-in vue-cli-plugin-vuetify und die Abhängigkeiten zu Vuetify hinzu. Die Anwendung sollte sich danach mit …

npm run serve

… im Entwicklungsserver starten lassen. Das blaue Vuetify-Logo bestätigt die erfolgreiche Installation.

Schnelle Erfolge mit Wireframes

Um schnell zu einem ansprechenden Layout zu kommen, nutzt man am besten eines der von Vuetify zur Verfügung gestellten fertigen Wireframes. In der Vorschau dieser Templates befindet sich in der rechten unteren Ecke ein Button, der zum Github-Repository führt. Dort lässt sich der Code kopieren und in die eigene Anwendung einfügen.

Im Folgenden ist der Code des Layouts Basic wiedergegeben, mit ihm kann einfach der Inhalt der Datei App.vue überschrieben werden:

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
    >
      <!--  -->
    </v-navigation-drawer>

    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <!--  -->
    </v-main>
  </v-app>
</template>

<script>
  export default {
    data: () => ({ drawer: null }),
  }
</script>

Der Basic-Wireframe in der Anwendung
(Bild: Koller)

Wie in der Abbildung zu erkennen ist, hat die App danach einen Navigationsbereich und einen Header. Mit dem Dreistrich (Burger)-Button lässt sich der Navigationsbereich ausblenden. Der Header wird durch v-app-bar und der Navigationsbereich durch Komponenten vom Typ v-navigation-drawer dargestellt.

In der Doku findet man zu jeder Komponente Anwendungsbeispiele inklusive Quellcode. Um Navigations-Items zuzufügen, wird v-navigation-drawer der folgende Code aus der Doku zugefügt:

<v-navigation-drawer
  v-model="drawer"
  app>
  <v-list-item>
    <v-list-item-content>
      <v-list-item-title class="text-h6">
        Application
      </v-list-item-title>
      <v-list-item-subtitle>
        subtext
      </v-list-item-subtitle>
    </v-list-item-content>
  </v-list-item>

<v-divider></v-divider>

  <v-list
    dense
    nav
  >
    <v-list-item
      v-for="item in items"
      :key="item.title"
      link
    >
      <v-list-item-icon>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-item-icon>

      <v-list-item-content>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

Wichtig bei der Verwendung der Codebeispiele ist daran zu denken, dass sich hinter dem Reiter Script in der Regel auch Logik und Variablen zum Template verbergen, die in data() integriert werden müssen:

data () {
  return {
    drawer: null,
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Photos', icon: 'mdi-image' },
      { title: 'About', icon: 'mdi-help-box', to: '/about' },
    ],
  }
},

Links werden mit v-list-item zugefügt.
(Bild: Koller)

Der Navigationsbereich der App sieht damit schon ganz brauchbar aus, die Einträge deuten aber noch ins Leere. Um das zu ändern, wird in App.vue innerhalb von v-main das Element router-view ergänzt:

<v-main>
  <router-view></router-view>
</v-main>

Außerdem werden die ListItems mithilfe der to-Prop um ein Ziel erweitert. Für die bereits vorhandene About-Seite sieht das folgendermaßen aus:

<v-list-item
  v-for="item in items"
  :key="item.title"
  :to="item.to"
  link>
...

{ title: 'About', icon: 'mdi-help-box', to: '/about' },

Die Anwendung mit Footer.
(Bild: Koller)

Ein Klick auf den about-Link führt nun zur entsprechenden Seite, weitere Links können analog zugefügt bzw. angepasst werden. Wer mag, kann in v-app noch einen Footer zufügen, Codebeispiele finden sich im Komponenten-Bereich der Vuetify-Dokumentation:

...
<v-footer padless>
  <v-col
    class="text-center"
    cols="12"
  >
    {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
  </v-col>
</v-footer>
</v-app>

Der Anwendungsrahmen sieht damit nun schon recht brauchbar aus.

Vuetifys Grid System

Der About-Text klebt noch ziemlich an den Rändern. Um das zu ändern, kann man den Inhalt des Templates in die Komponente v-container packen. v-container ist Teil des vuetify-Grid-Systems und zentriert den Inhalt. Das Grid-System ist an Bootstrap Grid angelehnt und besteht aus Containern, Rows und Cols, mit deren Hilfe sich der Inhalt anordnen und ausrichten lässt.

Maximal lassen sich 12 Elemente in einer Zeile verbauen. Benötigt man beispielsweise nur vier belegt jedes drei Plätze. Das folgende Codestück zeigt das Vorgehen an einer Zeile mit drei Cols (jede belegt 4 Plätze) und einer weiteren Zeile mit 4 Cols (jede belegt 3 Plätze):

v-container>
  <v-row>
    <v-col cols="4">Column1</v-col>
    <v-col cols="4">Column2</v-col>
    <v-col cols="4">Column3</v-col>
  </v-row>

  <v-row>
    <v-col cols="3">Column1</v-col>
    <v-col cols="3">Column2</v-col>
    <v-col cols="3">Column3</v-col>
    <v-col cols="3">Column4</v-col>
  </v-row>
</v-container>

Vuetifys Grid System ist wie das von Bootstrap „responsive“, versucht also, auf verschiedenen Geräten gut auszusehen. Mit Hilfe von „Media Breakpoints“ kann man definieren, bei welcher Screen-Größe sich das Layout anpasst. Die Bezeichnung für die Breakpoints sind xs, sm, md, lg und xl. Damit lässt sich beispielsweise steuern, ob Komponenten sichtbar sind. Um zum Beispiel einen Button nur auf Tablets und auf Mobiltelefonen anzuzeigen (sm < 960px) lässt sich die CSS-Klasse wie folgt formulieren:

<v-btn class="d-sm-none">Mobile only</v-btn>

Die möglichen Konditionen sind unter Display Helpers in der Vuetify-Dokumentation beschrieben. Gewappnet mit diesem Wissen um Vuetifys Grid System werden den noch leeren Views der App im nächsten Beitrag mächtige UI-Komponenten zugefügt – es bleibt spannend!

(ID:48235035)

Das JavaScript-Framework Vue.js, Teil 10 Vue-Anwendungen verschönern mit Vuetify

Schnelle Erfolge mit Wireframes

Vuetifys Grid System

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Softwareentwicklung und DevOps

Einwilligung in die Verwendung von Daten zu Werbezwecken

Karrierechancen