Get Screen Size and Check if Window Size changes in Vue 3

When you create a web application, you must ensure that your application looks nice on any device and web browser. For that, it is important to identify the size of the user's device and browser in Vue 3.

You can also add custom styles depending on the size of the browser window. There are a lot of use cases where you want to detect these values.

That's why I will show you some techniques to get the device screen size (width and height) and browser window size (width and height) in a Vue 3 application.

In my examples, I will use Vue 3 composition API with the "script setup" syntax. But you can also use these techniques with options API.

How to Get Device Screen Width and Height in Vue 3

To get the device screen width and height, you can use the screen.width and screen.height properties inside a Vue 3 component. This screen object is a part of JavaScript available in any browser.

When we access the width and height properties from this object, these will return the total width and height of the screen.

          <template>
    <div>
        <p>Screen Width: {{ screenWidth }}</p>
        <p>Screen Height: {{ screenHeight }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const screenWidth = ref(screen.width)
const screenHeight = ref(screen.height)
</script>
        

I am creating 2 reactive variables using the ref() function from Vue 3. These variables store the width and height values of the current screen.

I am setting the screen size to these variables using the screen.width and screen.height properties.

Now you can utilize these values in your application or display them in the template.

Also Read: Improve Performance in Vue 3 Using Lazy Loading and Dynamic Import

How to Get Browser Window Size (Width and Height) in Vue 3

To get the width and height of a browser window in a Vue 3 application, you can use the innerWidth and innerHeight properties from the JavaScript window object.

These properties will give the width and height of the current viewport. That means they will return the width and height values of the visible part of a webpage.

They don't include the size of the toolbars and scrollbars of a browser.

          <template>
    <div>
        <p>Window Width: {{ windowWidth }}</p>
        <p>Window Height: {{ windowHeight }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const windowWidth = ref(window.innerWidth)
const windowHeight = ref(window.innerHeight)
</script>
        

I am storing the browser width and height in reactive variables using window.innerWidth and window.innerHeight properties. Even though these variables are reactive, the values won't change if you change the window size.

But it is possible to update the values of your window width and height whenever the window size changes.

Also Read: Best Way to Re-render Vue 3 Components: Master Guide

Detect If the Window Size Changes with resize Event

You can detect the window size changes with the resize event and update the width and height of the window automatically.

This resize event fires when you change the window size of your browser. You can listen to this event and modify the previous values with the current window size values.

          <template>
    <div>
        <p>Window Width: {{ windowWidth }}</p>
        <p>Window Height: {{ windowHeight }}</p>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const windowWidth = ref(window.innerWidth)
const windowHeight = ref(window.innerHeight)

const handleResize = () => {
    windowWidth.value = window.innerWidth
    windowHeight.value = window.innerHeight
}

onMounted(() => {
    window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
})
</script>
        

I am listening to the resize event to the window object using the Vue 3 onMounted() hook. Because I want to execute this once after the component is mounted.

Whenever this event fires, it will execute the handleResize() function. This function will update the values of windowWidth and windowHeight reactive variables with the current window size values.

You also have to remove the resize event when the component unmounts using the onUnmounted() hook from Vue 3.

Also Read: How to Pass Data From Child to Parent in Vue 3 (Composition API)

Conclusion

By using the screen and window objects, you can easily retrieve the width and height values of the device screen and browser window in your Vue 3 application.

You can also monitor the changes in window size with the resize event and get the current width and height values of the browser window.

If you change the size of your browser window, it will only update the window size values. The width and height of the screen won't change. Because the device screen size remains the same.

Therefore, you don't have to try to detect the changes in the screen size of a device in your Vue 3 application.