As it's said in https://stackoverflow.com/a/56786454 but without a real clarification, you need to also set override the scss variable $grid-breakpoints
.
How to override scss variables it is described in Vuetify docs: https://vuetifyjs.com/en/features/sass-variables/#component-specific-variables
you need to create separate scss file, kind of path/to/scss/vuetify.config.scss
and put your changes into it:
@use 'vuetify/settings' with (
$grid-breakpoints: (
'xs': 0,
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1200px,
'xxl': 1400px,
)
);
and then include it into nuxt.config.ts
file (I'm using the Manual setup
approach form Vuetify docs https://vuetifyjs.com/en/getting-started/installation/#manual-setup):
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
//...
build: {
transpile: ['vuetify'],
},
modules: [
(_options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) => {
// @ts-expect-error
config.plugins.push(vuetify({
autoImport: true,
styles: {
configFile: "path/to/scss/vuetify.config.scss",
},
}))
})
},
//...
],
vite: {
...
},
})