CODEWITHSUNDEEP
vue.jsvuetify.js
Jon Sud
Jon Sud

Reputation: 11651

Vuetify directives not following my breakpoints

In my vuetify application I defined my custom breakpoints as the following:

Vue.use(Vuetify, {
  breakpoint: {
    thresholds: {
      xs: 576,
      sm: 768,
      md: 1024,
      lg: 1400,
    },
  },
});

Its working well when I try to display the names of the breakpoints: 

{{ $vuetify.breakpoint.name }}

But when I try to use some of directives (xs/sm/md/lg/xl) it's not work as expected.

For example in my demo application you can see that im in sm mode and act like xs mode.

<v-layout row wrap>
            <v-flex
              v-for="item in [1,2,3,4]"
              :key="item"
              style="height:400px;border:1px solid red;"
              xs12
              sm6
              lg4
    ></v-flex>
</v-layout>

enter image description here It's not work as expected. It is because I miss something here?

Upvotes: 1

Views: 2030

Answers (1)

tao
tao

Reputation: 90178

Yes, you did miss something here. As per Vue documentation:

You can define your own breakpoint threshold pixel values, but it is currently a two-step process:

  1. To update the styles you will have to override the $grid-breakpoints stylus variables (please see Modifying Stylus variables).
  2. To use the same values on the javascript side of things you must pass them during the application bootstrap like so:
Vue.use(Vuetify, {
  breakpoint: {
    thresholds: {
      xs: 360
    },
    scrollbarWidth: 10
  }
})

It looks like you missed step 1.

Stylus, like SCSS, is a CSS pre-processor. It helps keep things organized and allows for otherwise problematic refactors (like the one you need now).
You can override the values and rebuild a stylus based package, resulting in different CSS sources for your app.

Upvotes: 1

Related Questions