Set reactive screen width with vuejs

I don't think there's a way to do that unless you attach a listener on the window. You can add a property windowWidth on the component's data and attach the resize listener that modifies the value when the component is mounted.

Try something like this:

<template>    <p>Resize me! Current width is: {{ windowWidth }}</p></template<script>    export default {        data() {            return {                windowWidth: window.innerWidth            }        },        mounted() {            window.onresize = () => {                this.windowWidth = window.innerWidth            }        }    }</script>

Hope that helps!

If you are using multiple components with this solution, the accepted answer's resize handler function will update only the last component.

Then you should use this instead:

import { Component, Vue } from 'vue-property-decorator';@Componentexport class WidthWatcher extends Vue {   public windowWidth: number = window.innerWidth;   public mounted() {       window.addEventListener('resize', this.handleResize);   }   public handleResize() {       this.windowWidth = window.innerWidth;   }   public beforeDestroy() {       window.removeEventListener('resize', this.handleResize);   }}

source: https://github.com/vuejs/vue/issues/1915#issuecomment-159334432

You can also attach a class depending on the window width

<template>    <p :class="[`${windowWidth > 769 && windowWidth <= 1024 ? 'special__class':'normal__class'}`]">Resize me! Current width is: {{ windowWidth }}</p></template><script>export default {    data() {        return {            windowWidth: window.innerWidth        }    },    mounted() {        window.onresize = () => {            this.windowWidth = window.innerWidth        }    }}</script><style scoped>.normal__class{}.special__class{}</style>