v3.2.0 Orion

Welcome to the v3.2 release of Vuetify! The team has been hard at work on some exciting new updates and we're excited to finally get it into your hands!

Orion has a huge focus on improving the defaults engine and giving users more tools to customize their application. We started by adding support for global class and style defaults; then hooked it up to virtual components.

For example, you can set the default class for all v-btn components to be my-btn:

import { createVuetify } from 'vuetify'

export default createVuetify({
  defaults: {
    VBtn: {
      class: 'my-btn',
    },
  },
})

The same is possible for virtual components as well. Simply alias a core component and reference it by its name in the config object:

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',
    },
  },
})

Whenever you use the MyBtn component in any template it will be rendered as a v-btn with the default props applied:

<template>
  <my-btn>My Button</my-btn>
  <!-- <v-btn color="primary" variant="tonal" class="mt-btn">...</v-btn>-->
</template>

Finally, we made our defaults composable publicly available. Now you can hook your custom components into the defaults engine and configure your entire application from a single source.

<template>
  <div>
    I am {{ props.foo }}
  </div>
</template>

<script setup>
  import { useDefaults } from 'vuetify'

  const _props = defineProps({ foo: String })
  const props = useDefaults(_props)
</script>

The defaults composable also works with nested configurations. This works in any combination of virtual, custom, and core Vuetify components.

For example, you can create a custom component that modifies the default behavior of its children:

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',
      },
    },
  },
})

Some other big feature updates in this release include:

v-virtual-scroll has moved to the core library
v-infinite-scroll has entered Labs
added new flex CSS utility classes

With v3.2 complete, the team is preparing for v2.7-lts (Nirvana) and the next v3 release, Icarus. We've recently updated our roadmap to be more transparent about our plans for the future; as well as improve the information about each release. Also, we've drastically improved the performance of the documentation and added new tools, such as 🎮Vuetify Play, to all component examples.

We hope that you enjoy this release as much as we have enjoyed working on it.

Until next time,

John Leider

💪 Support Vuetify Development

Vuetify is an open source MIT project that has been made possible due to the generous contributions by our sponsors and backers. If you are interested in supporting this project, please consider:

📖 Table of Contents

#Release Introduction
#Important Links
#Upgrade Guide
#Release Notes
#I need help

❗️ Important Links

📄 Docs
🚨 Issues
🏬 Store
🎮 Play
💬 Discord
🐦 Twitter
👽 Reddit

📑 Upgrade guide

The title prop on v-tab is now text
The visible-items prop has been removed

💯 Release notes

🚀 Features

defaults: allow setting class and style (#16459) (e3338d9), closes #16896 #17188
framework: expose useDefaults() (#16461) (9a547b1)
flex: add new classes (#16820) (bce1b07)
VAppBar: implement scrolling techniques (#16267) (87ddbc8)
VBtn: resize height of button when override $spacer (#17097) (6169fc8)
VBtn/VTab: add text property (753d444)
VField: add baseColor prop (#16719) (92dffce), closes #16713
VField: add solo-inverted variant (#16794) (d0b41e4)
VIcon: support SVGs with multiple paths (#17098) (845be0b)
VSlider: add start and end events (#16514) (be71818)
VTooltip: add eager prop support (#16752) (d0761be)
VVirtualScroll: remove visibleItems prop (760ac21)
VVirtualScroll: promote from labs (f8c5746)

🔧 Bug Fixes

defaults: remove required default and add chain operator (eb00082)
types: change update:focused event type to boolean (#17237) (35b9411), closes #17197
types: volar compatible generic types (#17231) (36e3834), closes #17211
VRating: keyboard navigation (1c0a0d2)
VRating: expose model value in item slot (62b4be7)
VVirtualScroll: reuse existing elements (c3f79aa), closes #11951
VVirtualScroll: correct midpoint calculation (9f12b0f)

🧪 Labs

date: add new composable to labs (#16691) (919dab2)
VVirtualScroll: promote from labs (f8c5746)
VInfiniteScroll: initial implementation (#15590) (229a440), closes #3538

BREAKING CHANGES

VTab: The VTab title prop is now text
VVirtualScroll: visibleItems has been removed

🆘 I need help!

If you are stuck and need help, don't fret! We have a very large and dedicated community that is able to provide help 24/7. Come to the #vuetify-3-help channel.

vuetifyjs/vuetify v3.2.0 on GitHub