79199952

Date: 2024-11-18 12:47:06
Score: 1
Natty:
Report link

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: {
    ...
  },
})
Reasons:
  • Blacklisted phrase (1): stackoverflow
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: Dmytro Yaroshenko