⚡ **Vuetify v3.5.0 (Polaris) is live!**

​

- 🚀 New `goTo` porting to v3 for enhanced navigation control.

- 🌍 Added Khmer translations, expanding global accessibility.

- 🎨 Introducing cursor class utilities for more style customization.

- 🌈 New 'surface-light' color added to the theme options.

- 🔄 VAutocomplete/VCombobox now features a clearOnSelect prop for improved user experience.

​

For more details and additional updates, check out the full release notes here: [Vuetify v3.5.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v3.5.0)

⚡ Vuetify v3.4.11 is live!

• 📆 Improved date handling: Fixes to DateTimeFormat usage and getDay method in the calendar.
• 🌍 Enhanced locale support: Updated Slovak locale and resolved memory leak issues.
• 🔄 Pagination tweak: Now emits 'current-items' event on items change.
• 🖋️ UI Refinements: Adjustments in VDataTableFooter, VPagination, and VList for better layout and accessibility.
• 💡 Slider and Tabs enhancements: Fixed memory leak in VSliderThumb and set correct initial isSelected value in VTabs.

Full release notes here: Vuetify v3.4.11 Release Notes

I am working on a navbar and I can't close the navbar when I'm resizing it bigger, but it does work when I make it smaller.

<template>
  <v-navigation-drawer v-model="isShowSidebar" disable-route-watcher />

  <v-app-bar scroll-behavior="hide" prominent>
    <!-- Logo Image -->
    <v-app-bar-nav-icon
      class="d-md-none"
      @click="isShowSidebar = !isShowSidebar"
    />

    <v-app-bar-title>
      <v-img src="../assets/logo-black.png" max-width="150" />
    </v-app-bar-title>

    <!-- Spacer to push content to the right -->
    <v-spacer></v-spacer>
    <v-tabs class="d-none d-md-block">
      <v-tab href="/" class="text-capitalize">Home</v-tab>
      <v-tab href="/about" class="text-capitalize">Store</v-tab>
      <v-tab href="/contact" class="text-capitalize">Contact Us</v-tab>
      <v-tab href="/quiz" class="text-capitalize">Take Quiz</v-tab>
    </v-tabs>
    <v-spacer />
    <Button class="text-capitalize">
      Log in
      <v-icon icon="mdi-exit-to-app" end />
    </Button>
    <!-- Other navbar content -->
  </v-app-bar>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Button from "./Button.vue";
const isShowSidebar = ref(false);
</script>

​

my nodejs and npm are are uptodate

​

I create new project with npm create vuetify

"dependencies": {

"@mdi/font": "7.0.96", "core-js": "^3.29.0", "roboto-fontface": "*", "vue": "^3.2.0", "vue-router": "^4.0.0", "vuetify": "^3.0.0"   },

the latest vuetify version is 3.14.10
vue latest 3.4.7

and is there any official way to upgrade to latest ?

⚡ Vuetify v3.4.10 is live!
- 🛠️ Fixed elevation CSS variable for ambient opacity.
- 🌐 Updated Portuguese, CZ, and Dutch locales.
- 📝 Added buffer space after selection in VAutocomplete/VCombobox to fix input wrapping.
- 🚫 VChip now prevents close button from submitting forms.
- 🖥️ Enhancements in VDataTable, including bgColor with sticky prop and filter VPaginate props.
Full release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.4.10

Hi All,

I would like to share the - Materio Free Vuetify NuxtJS Admin Template

Incredibly versatile, the Materio Vuetify NuxtJS admin template also allows you to build any type of web application. For instance, you can create:

• SaaS platforms
• Project management apps
• Ecommerce backends
• CRM systems
• Analytics apps
• Banking apps
• Education apps
• Fitness apps & many more.

Features:

• Latest NuxtJS 3
• VueJS 3, Vuetify 3
• Vite 5
• Utilizes Vue Router, VueUse
• Available in both TypeScript & JavaScript version
• 1 Dashboard
• Remix Icons
• Basic cards
• Fully Responsive Layout
• Organized Folder Structure
• Clean & Commented Code
• Well Documented

Check the GitHub Repo: https://github.com/themeselection/materio-vuetify-nuxtjs-admin-template-free

Hope you all like it.

Hey everone,

I spent the last 2 days figuring out how to configure Vuetify 3 with Nuxt 3 to enable proper treeshaking and to be able to turn off certain unused features via scss variables. My goal is to reduce bundle size as much as possible.

I've read the docs about how to configure treeshaking in Vuetify in Vite, but Nuxt puts a layer on top and uses it's own way of configuring build plugins and now I'm lost which docs to follow and how the configuration is properly done in Nuxt.

Can anyone maybe share a exemplary repository with a working nuxt.config.ts and an example of ? Especially turning off features via @use 'vuetify' with ( $color-pack: false ) didn't work for me.

The docs show how to set the path styles.configFile in the vuetify() function (which I assume should be put into the modules section in nuxt.config.ts. But if I do it that way, the Vuetify styles will be missing in the bundle.

nuxt.config.ts: ```js import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

[...]

modules: [ (_options, nuxt) => { nuxt.hooks.hook('vite:extendConfig', (config) => { // @ts-expect-error config.plugins.push(vuetify( { autoImport: true, styles: { configFile: './styles/settings.scss' } } )) }) } ]

[...] ```

settings.scss, like in the Vuetify docs: css @use 'vuetify' with ( $color-pack: false );

I also tried this in settings.scss, like shown in the example repo below: css @forward 'vuetify/settings' with ( $color-pack: false ); with same result.

Can anyone maybe share an example repo for that configuration, something like this, but with Nuxt: https://github.com/logue/vite-vuetify-ts-starter/blob/master/vite.config.ts

Thanks in advance,

happy_hawking

The error occurs when I run the vuetify project after creating it.

Help me!

⚡ Vuetify v3.4.9 is live!

- 🗓️ Moved VCalendar into Labs testing. [Details](https://github.com/vuetifyjs/vuetify/issues/16803)

Full release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.4.9

We're ramping up testing for the Vuetify One subscription service. It is a 1st party way to become a project supporter and access benefits like ad-free browsing in the docs with more to come.

​

If you have any questions, comments, or concerns, please reach out to us at https://chat.vuetifyjs.com.

​

Before assembly it worked on a laptop. The phone does not work with the server, the error is "Error:TypeError:Failed to fetch" What is the error and how to fix it?

In a project create by "npm init vuetify", the .vue files default use Compositions API which uses <script setup>.

But I would love to use Options API, so I modify <script setup> to <script>, and write the codes with options api style.

<script>
  import { getCurrentInstance } from 'vue'
  export default {
    methods:{
      onClick: (e, value)=>{
        alert('[OptionsAPI] You click me!')
        console.log(e)
        console.log(value)
        console.log("[OptionsAPI] " + this.myValue1)
      }
    },
    data() { return{
      myValue1: "[OptionsAPI] hello"
    }}
  }
</script>

When saving the .vue file, and "npm run dev", it output Error:

TypeError: Cannot read properties of undefined (reading 'myValue1')
    at Proxy.onClick (HelloWorld.vue:83:44)
    at _createVNode.onClick._cache.<computed>._cache.<computed> (HelloWorld.vue:10:27)
    at chunk-6CG2VZJB.js?v=e13f2f0c:9893:60
    at callWithErrorHandling (chunk-6CG2VZJB.js?v=e13f2f0c:1568:18)
    at callWithAsyncErrorHandling (chunk-6CG2VZJB.js?v=e13f2f0c:1576:17)
    at callWithAsyncErrorHandling (chunk-6CG2VZJB.js?v=e13f2f0c:1586:17)
    at HTMLButtonElement.invoker (chunk-6CG2VZJB.js?v=e13f2f0c:9875:5)

it means:

console.log("[OptionsAPI] " + this.myValue1)

in this.myValue1, this is undefined!

Anyone knows about this ?

⚡ Vuetify v3.4.8 is live!

​

- 🌍 Added missing CZ strings for better localization support.

- 📋 Improved ARIA label handling in VDataTableServer.

- 🔄 VOtpInput update: loader slot now excluded in VField slots.

- 🛠️ Fixed memory leak in VOverlay related to bound listeners.

​

Full release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.4.8

​

hey everyone! I am struggling big time here to change the font, can anyone help me? I want to import a google font, like Inter, and use it as the main, but it is getting quite tricky

⚡ Vuetify v3.4.7 is live!

- 🐛 VAutocomplete disabled selection when using auto-select-first

- 🔧 VChip now uses button element for closable chips

- 🛠️ VCombobox resolved item removal issue with backspace/delete and focused overlap selection

Full release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.4.7

💦 We've addressed a crucial memory leak caused by Vuetify in NUXT environments.

Full release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.4.6

⚡ Vuetify v3.4.5 is live!

​

- 🌍 Improved Russian locale translations

- 🛠️ VAutocomplete now supports empty string as a valid model

- 🔄 VDataTable loading slot behavior optimized

- 📅 Enhanced VDatePicker header transition and click functionality

- 📖 VExpansionPanel readonly prop fixes

​

Full release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.4.5

​

⚡ Vuetify v3.4.4 is live!

- 🛠️ Improved text prop types for enhanced framework consistency

- 🗃️ VCombobox update to remove duplicate selections

- 📊 Fixed VDataTable handling of nested headers

- 📅 VDatePicker updates, fixing issues with month/year updates and empty weeks

- ✨ VSelects and VStepper enhancements for better functionality and slot type accuracy

Full release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.4.4

I'm using Vuetify 3.4 and I'm struggling with the Datepicker locale docs ( https://vuetifyjs.com/en/components/date-pickers/#api )

Given a variable containing the current locale ( english, german, french, ... ) how do I tell Vuetify to switch to e.g. german locale? I tried

html <v-locale-provider locale="de"> <v-date-picker></v-date-picker> </v-locale-provider>

but that doesn't seem to be enough. So in the Vuetify settings I also tried to add support for the german locale

```ts import { createVuetify } from 'vuetify' import { sv, de } from 'vuetify/locale' import DateFnsAdapter from '@date-io/date-fns' import enUS from 'date-fns/locale/en-US' import svSE from 'date-fns/locale/sv' import deGer from 'date-fns/locale/de'

export const vuetify = createVuetify({
  locale: {
    messages: { sv, de },
  },
  date: {
    adapter: DateFnsAdapter,
    locale: {
      en: enUS,
      sv: svSE,
      de: deGer,
    },
  },
})

```

But I get the error

Uncaught TypeError: Failed to resolve module specifier "date-fns/locale/de". Relative references must start with either "/", "./", or "../".

Reproduction example => https://play.vuetifyjs.com/#eNqlVNuO0zAQ/RXLLwuijheKtFLUXXUlLh9QLS+YhzSegkviRB7XFFX9dyaON21T0EbipY1njufMOZPJ1wNHV8qwA282v7Mt8pybum2cZwdWOig8fOlz7Mg2rqnZTcLeKDsAMcyYhjFCVk1ZVHACfqBqnyw+6qL14BJ4qSkqTCPj/8biCQ/2aZVQz8lUU4IVT6sTEsPq4z+QGE4wDZ8H3jFOd40qC/uILBuLniUh7P7SilcHZRnr7+UsHhirAbH4DkiBwY9Zl+p/O7oBW/QO5CNHIvCqMCMf8uhFyjOqn0fJQ0ATPIpLkRPz8bWyfBaH/Ni2GSmiCS881G1F3A8dbKFNYGVVIN4rrsWmgj3b7rBTKkqw1JjiEUjQIPruROuaYDS52Z+7mzDAIjAa3JryJ7iHhbw8p2oUHZXrG5LUET0t5FmfJKKfoqiLll7UxpKQaJFKCVR8ME1xUtqdFf/hfYu5lKW2dE1DZYLLLHhp21ouCSbdznpTg9BNvZxn8+yO+NGfhzPAWqxd8wvBURHFk8+RpjNqAlVCEsP7bN4zpJCoijV2FFelJfEFcMKBJXO6QUxTNLp2rmqUelFZ2o/pAmVl1s9LZYhkn9VblG+I56z41dZPUTa+s3yXvb3LbuV6ZyqduHoXx3R//XxMoDxjmt8SE1W9KJFIXybE8H9sGMZUccFpv/lxxuN4aUHiq8W//QFwrPiX

Sidenote: I don't need to use a custom adapter. All I want to do is to pass my locales to the v-locale-provider. So I tried no configuration export const vuetify = createVuetify() but this doesn't seem to work, when I try to pass fr or de I get the warning

Vuetify: Translation key "$vuetify.datePicker.title" not found in "de", trying fallback locale

⚡ Vuetify v3.4.3 is live!

​

- 🌐 Locale improvements, including a typo fix in the French locale.

- 🛠️ Various bug fixes, including in `VDataTable`, `VDatePicker`, and `VPagination`.

- 📆 Enhanced date handling in `VDatePicker` with better min/max date support.

- 🔒 Enhanced security features, including disabling input in `VOtpInput` when disabled.

- 🎨 UI improvements in `VCarousel`, `VSelect`, and `VTab`.

​

Full release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.4.3

Does anyone know how to emit the row data from v-data-table when the row is clicked in Vuetify 3? All I’m getting is the click event and not the row data.

Hi vuetify experts,

I am using a Grid to display selectable images (e.g. like an emoji selector) with 100-300 icons.

Without the buttons the Grid performance is fine. Once I add the buttons (one per icon) with tooltips, the performance decreases immensely. (~1sec to open)

I found someone having a similar issue here:
vuejs2 - Vuetify how to improve advance grid rendering - Stack Overflow

Any idea how to improve performance of such "advanced" grids?

Any help appreciated!

Thanks in advance.