vuetify-module
vuetify-module copied to clipboard
Breakpoints in vuetify options not working
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;
}
}
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
@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 :)