Liebe Leserinnen und Leser,
Bevor wir uns mit den Neuerungen und Verbesserungen von Vuetify v3.2 befassen, lassen Sie uns kurz Vuetify selbst vorstellen, falls Sie noch nicht damit vertraut sind.
Vuetify ist ein populäres Vue.js-Framework, das auf dem Material Design von Google basiert. Es bietet Entwicklern eine umfangreiche Sammlung von wiederverwendbaren und anpassbaren UI-Komponenten, die die Erstellung ansprechender und konsistenter Webanwendungen erleichtern. Vuetify hilft dabei, die Entwicklungszeit zu verkürzen und die Produktivität zu steigern, indem es eine Vielzahl von vordefinierten Stilen und Layouts sowie zahlreiche Helferklassen bereitstellt. Es ist vollständig responsiv, unterstützt sowohl Light- als auch Dark-Themes und hat eine aktive Community, die ständig neue Funktionen und Verbesserungen entwickelt.
Jetzt, da wir wissen, was Vuetify ist und welche Vorteile es bietet, können wir uns die spannenden Neuerungen in der Version 3.2 ansehen.
ich freue mich, Ihnen heute von einem spannenden Update im Bereich Vue.js-Frameworks zu berichten. Vuetify hat kürzlich die Version 3.2 veröffentlicht, und diese bringt einige interessante Neuerungen und Verbesserungen mit sich. In diesem Blogbeitrag möchte ich Ihnen die wichtigsten Änderungen und Features vorstellen.
- Verbesserungen beim Standardverhalten von Komponenten
Ein Hauptaugenmerk des Updates liegt auf der Optimierung des sogenannten Defaults-Systems. Mit der neuen Version ist es nun noch einfacher, das Standardverhalten von Vuetify-Komponenten global zu ändern und anzupassen. So können Sie beispielsweise die Standardklasse für alle v-btn-Komponenten ändern:
import { createVuetify } from "vuetify";export default createVuetify({ defaults: { VBtn: { class: "my-btn", },});Diese Anpassungen sind auch für virtuelle Komponenten möglich. Hierbei können Sie eine Kernkomponente aliasen und sie in der Konfigurationsdatei referenzieren:
import { createVuetify } from "vuetify";import { VBtn } from "vuetify/components/VBtn";export default createVuetify({ aliases: { MyBtn: VBtn, defaults: { MyBtn: { color: "primary", class: "my-btn", variant: "tonal", },});- Zugänglichkeit der Defaults Composable
Die Defaults Composable ist nun öffentlich zugänglich und ermöglicht es Ihnen, benutzerdefinierte Komponenten in das Defaults-System einzubinden. So können Sie Ihre gesamte Anwendung von einer zentralen Stelle aus konfigurieren.
- Unterstützung für geschachtelte Konfigurationen
Die Defaults Composable arbeitet auch mit geschachtelten Konfigurationen, sodass Sie benutzerdefinierte Komponenten erstellen können, die das Standardverhalten ihrer untergeordneten Elemente ändern:
import { createVuetify } from "vuetify";import { VBtn } from "vuetify/components/VBtn";import { VCard } from "vuetify/components/VCard";export default createVuetify({ aliases: { MyBtn: VBtn, MyCard: VCard, defaults: { MyBtn: { color: "primary", class: "my-btn", variant: "tonal", }, MyCard: { border: true, variant: "text", MyBtn: { color: "secondary", variant: "text", }, },});- Weitere bemerkenswerte Neuerungen
- v-virtual-scroll wurde in die Kernbibliothek aufgenommen
- v-infinite-scroll wurde in Labs eingeführt
- neue Flex CSS Utility-Klassen wurden hinzugefügt
Das Vuetify-Team arbeitet bereits an den nächsten Versionen v2.7-lts (Nirvana) und v3 (Icarus) und hat kürzlich seine Roadmap aktualisiert, um transparenter über die Zukunftspläne zu informieren. Außerdem wurden die Leistung und Benutzerfreundlichkeit der Dokumentation verbessert, und es wurden neue Tools wie 🎮Vuetify Play zu allen Komponentenbeispielen hinzugefügt.
Ich hoffe, dass diese Informationen Ihnen einen guten Überblick über das Vuetify v3.2-Update geben und Sie von den Verbesserungen und neuen Funktionen profitieren können.
Sollten Sie Fragen oder Anregungen zu diesem Update haben, zögern Sie nicht, sich an das Vuetify-Team über Discord oder Twitter zu wenden. Sie sind immer offen für Feedback und freuen sich, von der Community zu hören.
Viel Spaß beim Ausprobieren der neuen Funktionen und happy coding!