Vue.js get screen size like CSS media queries

Question

The current method that I am using right now to get the screen size is:

export const state = () => ({
  deviceType: window.innerWidth <= 600 ? 'mobile' : 'desktop',
})

export const getters = {
  getDeviceType(state) {
    return state.deviceType
  }
}

The problem with this is my website needs to be refreshed to see the changes that I set that should appear only on mobile.

I've read about using window.addEventListener.. being able to solve this issue as it constantly triggers a function when the screen resizes.

But I am looking for a more straight forward way, ideally using computed or watcher on this. I think this is not a good way, using window.innerWidth, so any recommended way would be much appreciated.

Thanks in advance!

Answer 1

this via computed works fine for me: How can I use window size in Vue? (How do I detect the soft keyboard?)

It always updates itself as soon as the window size changes, moreover, like in css the breakpoint designation is indicated.

<template>
  <h1>{{ type + ": " + width }}</h1>
</template>

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

function useBreakpoints() {
  let windowWidth = ref(window.innerWidth)

  const onWidthChange = () => windowWidth.value = window.innerWidth
  onMounted(() => window.addEventListener('resize', onWidthChange))
  onUnmounted(() => window.removeEventListener('resize', onWidthChange))

  const type = computed(() => {
    if (windowWidth.value < 550) return 'xs'
    if (windowWidth.value >= 550 && windowWidth.value < 1200) return 'md'
    if (windowWidth.value >= 1200) return 'lg'
    return null; // This is an unreachable line, simply to keep eslint happy.
  })

  const width = computed(() => windowWidth.value)

  return { width, type }
}

const { width, type } = useBreakpoints()
</script>