Vue warning in console when using outside of a component

[maxnankivell]

I'm getting this warning when using useWindowSize() outside of a component with Vue 3 and the composition API

I have a typescript file with a computed property in it which I want to re-use in multiple components (code below)

import { computed } from "vue";
import { useWindowSize } from "vue-window-size";

const { width } = useWindowSize();
export const useImageSize = computed(() => {
  if (width.value < 1460) {
    return `125px`;
  }
  return `175px`;
});

Wondering if I'm using the library wrong or if this is something that could be avoided with a change.

[mya-ake]

@maxnankivell Since useWindowSize uses the Composition API(Lifecycle Hooks) internally, it must be called in the component. Therefore, if you want to make a common function, define it as a function and call the function in the component. I think useImageSize may be defined as follows.

export const useImageSize = () => {
  const { width } = useWindowSize();
  return computed(() => {
    if (width.value < 1460) {
      return `125px`;
    }
    return `175px`;
  };
};

[maxnankivell]

Hey @mya-ake Thanks for the fix that makes sense