Breakpoints in vuetify options not working

[M-Barari]

Module version 1.11.3

Describe the bug breakpoint options not working

//nuxt.config.js
vuetify:{
    rtl: process.env.SITE_DIRECTION === 'rtl' ? true : false ,
    customVariables: ['~/assets/scss/variables_vuetify.scss'],
    breakpoint: {
      thresholds: {
        xs: 600,
        sm: 960,
        md: 1366,
        lg: 1920,
      },
    },
    icons: {
      iconfont: 'mdi',
    },
    treeShake: false,
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

Expected behavior set my custom breakpoints

Additional context As I was reading Vuetify docs and some users issues, it looks like grid breakpoints should also be changed in sass file too. any idea? and I also tried to overwrite VGrid grid system by adding my media but didn't work!

@media (min-width: 1367px) {
  .col-lg {
    flex-basis: 0 !important;
    flex-grow: 1 !important;
    max-width: 100% !important;
  }
  .col-lg-auto {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .col-lg-1 {
    flex: 0 0 8.3333333333% !important;
    max-width: 8.3333333333% !important;
  }
  .col-lg-2 {
    flex: 0 0 16.6666666667% !important;
    max-width: 16.6666666667% !important;
  }
  .col-lg-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
  .col-lg-4 {
    flex: 0 0 33.3333333333% !important;
    max-width: 33.3333333333% !important;
  }
  .col-lg-5 {
    flex: 0 0 41.6666666667% !important;
    max-width: 41.6666666667% !important;
  }
  .col-lg-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .col-lg-7 {
    flex: 0 0 58.3333333333% !important;
    max-width: 58.3333333333% !important;
  }
  .col-lg-8 {
    flex: 0 0 66.6666666667% !important;
    max-width: 66.6666666667% !important;
  }
  .col-lg-9 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
  }
  .col-lg-10 {
    flex: 0 0 83.3333333333% !important;
    max-width: 83.3333333333% !important;
  }
  .col-lg-11 {
    flex: 0 0 91.6666666667% !important;
    max-width: 91.6666666667% !important;
  }
  .col-lg-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

[M-Barari]

Looks like the problem is sass file indeed! because option change this.$vuetify.breakpoint properties but not the style itself. I had to write my own media and overwrite grid system but there should be another way like this: How to change breakpoints in the scss in vuetify v2?

btw, tried

@import '~vuetify/src/styles/styles.sass';

// You need to map-merge your new SASS variables
$grid-breakpoints: map-merge($grid-breakpoints, (
  xs: 0,
  sm: 476px,
  md: 668px,
  lg: 1000px,
  xl: 1300px
))

but got many Dart 2 warnings that my node almost froze

[larzon83]

@M-Barari please read here: https://vuetifyjs.com/en/features/sass-variables/#nuxt-install -> treeShake must be true or anything you do in sass will have no effect.

After this, update your variables_vuetify.scss like this:

$grid-breakpoints: (
  'xs': 0,
  'sm': 476px,
  'md': 668px,
  'lg': 1000px,
  'xl': 1300px
);

@import '~vuetify/src/styles/styles.sass';

---

About the warnings: are you talking about these: https://github.com/nuxt-community/vuetify-module/issues/457 ? Simply add "sass": "1.32.13", to your devDependencies and do a npm i.

Hope that helps :)