Pass props based on tests within computed properties

Question

I ran into a problem with a simple test in Nuxt 3's computed() property.

const test = computed(() => {
  if (process.client) {
    console.log('Worked. Is it a mobile device?', window.innerWidth < 768)
    return window.innerWidth < 768
  } else {
    console.log('Didn't work')
    return
  }
})

The result of the computed property is always correct, but I want to use it in the template below to pass props conditionally.

<Loader
 v-if="isLoading"
 :images="test ? brands.desktopLoaderImages : brands.mobileLoaderImages"
/>

The problem is that regardless of the result, brands.mobileLoaderImages is always passed as props to my component and I can't figure out why.

I tried using a different technique to determine the screen size other than window.innerWidth, like a dedicated module like @vueuse/core but the result it's the same. I'm guessing the problem might be from Vue's lifecycle or something?

Answer 1

It is recommended to use useBreakpoints Use its nuxt module from VueUse :

const breakpoints = useBreakpoints()

const test  = breakpoints.smaller('md')