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:

• Sponsoring me on Github
• Requesting Enterprise Support
• Supporting Kael on Open Collective
• Becoming a sponsor on Patreon
• Becoming a subscriber on Tidelift
• Making a one-time donation with Paypal

📖 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

:rocket: 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)

:wrench: 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)

:test_tube: 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.