Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Is it possible to have a reactive window width where a variable or data property tracks a window resize

computed:{
    smallScreen(){
        if(window.innerWidth < 720){
            this.$set(this.screen_size, "width", window.innerWidth)
            return true
    return false
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';
@Component
export 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
<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>
                @andreyrd if you are wanting simple changes (e.g. display: none) then media queries are the best option. In the event it's more complex where screen resolution is important (e.g. changes of state to aria-hidden) then media queries aren't the best option. It's all based on scenario and unfortunately the OP doesn't provide that.
– Damian
                Feb 23, 2022 at 10:19
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.