v2.4.0 (Endurance)

Welcome to the v2.4.0 release of Vuetify!

The latest release (Endurance) brings multiple bug fixes, features, and quality of life changes to the Vuetify. Long awaited features such as the plain property for v-btn, new slots for v-carousel, and support for a globally defined icon component. In addition, we added support for 2 new locales, Azerbaijani and Central Kurdish, improved accessibility in the v-menu component, and new typography css classes.

We resolved numerous issues related to components and features we are building in Vuetify 3 right now! If you haven't yet, check out John's talk from Vue Conf Toronto Online 2020 with more information about what to expect with the upcoming release. Keep an eye out for updates pertaining to Titan in the coming weeks.

If you have questions regarding v3, connect with us in the Vuetify Discord.

-John Leider-

Supporting Vuetify

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

• Becoming a sponsor on Github
• Supporting the Core Team on Open Collective
• Becoming a sponsor on Patreon (supports the author)
• Becoming a subscriber on Tidelift
• Make a one-time payment with Paypal
• Direct support from Vuetify

📖 Table of Contents

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

Have questions? Check out our Frequently Asked Questions or join our Discord community.

❗️ Important Links

Vuetify Store
Documentation
Report a Bug
Community Discord
Twitter

🤚 FAQ

• Where is the Vuetify documentation?
  • The framework documentation is located at https://vuetifyjs.com
• Where is the upgrade guide?
  • Steps on how to upgrade your application from v2.3.x to v2.4 is located below
• Where can I get help with upgrading?
  • The #updating-versions channel in our Discord Community
  • Book time with the Vuetify team.

📑 Upgrade guide

v-row now has negative vertical margins in addition to the existing horizontal ones in order to fix spacing when grid components are nested (issue #11408). This change is known to cause layout problems in some cases but should be easy to fix. Discussion about this can be found in #12848.

Workarounds for #11408

If you were applying your own negative margins or overriding the v-col padding you will need to remove these workarounds now that the bug has been fixed.

Non-grid elements in v-row

There is now no space between the two cards in the following example:

<v-row>
  <v-col>
    <v-card></v-card>
  </v-col>
  <v-card></v-card>
</v-row>

The second card needs to be either wrapped in its own v-col or have class="my-6" added to match the grid gutters.

The recommended grid structure is below, anything else is not officially supported.

<v-container>
  <v-row>
    <v-col>
      <!-- Other elements go here -->
    </v-col>
  </v-row>
</v-container>

💯 Release notes

🆘 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 #release-migration channel.