How to change vue.js data value when screen size changes?

Question

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <template v-if="mobile == 1">
            <li><a href="#">Heading</a></li>
        </template>
        <!-- Else use long heading -->
        <template v-else-if="mobile == 0">
            <li><a href="#">Heading Long</a></li>
        </template>
    </ul>
</div>

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                mobile: 0
            }
});

I'm looking for a way to change the value of 'mobile' when the screen breakpoint of (max-width: 547px) becomes active. And to change it back when this mobile breakpoint becomes inactive (screen goes over 547px). I normally use skel (https://github.com/ajlkn/skel) to deal with screen breakpoints, but I cannot access skel from inside Vue, or vice-versa. I would forego using Vue for this particular task, but display: none, and display: block throws off my presentation--turning my element into a block.

Answer 1

Check this library : https://github.com/apertureless/vue-breakpoints

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <hide-at breakpoint="medium">
        <template v-if="mobile == 1">
            <li><a href="#">Heading</a></li>
        </template>
        </hide-at>
        <!-- Else use long heading -->
        <show-at breakpoint="mediumAndAbove">
        <template v-else-if="mobile == 0">
            <li><a href="#">Heading Long</a></li>
        </template>
        </show-at>
    </ul>
</div>

or simply go with media queries (https://www.w3schools.com/css/css3_mediaqueries_ex.asp)

CSS :

@media screen and (max-width: 600px) {
    #app ul il:first-of-type {
        visibility: visible;
    }
    #app ul il:last-of-type {
        visibility: hidden;
    }
}


@media screen and (max-width: 992px) {
    #app ul il:first-of-type {
        visibility: hidden;
    }
    #app ul il:last-of-type {
        visibility: visible;
    }
}

ofcourse it's up to you to decide what to show and what to hide on what breakpoint , i hope this helps.

Answer 2

You can use onorientationchange event like the following:

methods: {
   detectOrientationChange() {
      switch(window.orientation) {  
         case -90 || 90:
            // landscape
            this.mobile = false;
            break; 
         default:
            // portrait
            this.mobile = true;
            break; 
      }
   }
},
mounted() {
   this.$nextTick(() => {
      window.addEventListener('onorientationchange', this.detectOrientationChange)
   }
},
created() {
   this.detectOrientationChange(); // when instance is created
}

Note: As the event has been deprecated, it can only be used with mobile browsers as of writing this.

---

To detect screen orientation on current browsers check this post.

Answer 3

If you are using Vuetify, you can programmatically adjust the data value based on the built in breakpoints of xs, sm, md, lg, xl (as specified in Material Design) as follows:

computed: {
  mobile() {
    return this.$vuetify.breakpoint.sm
  },
}

mobile will change to true as soon as the screen width is less than 600px.

Your code would then be something like this (I also moved the if statement to be directly on the <li> element):

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <li v-if="mobile"><a href="#">Heading</a></li>
        <!-- Else use long heading -->
        <li v-else><a href="#">Heading Long</a></li>
    </ul>
</div>