Soy relativamente nuevo en Vue 3, trabajo en una aplicación en la que muchos componentes necesitan acceder al valor del ancho de la pantalla, con la necesidad de actualizarlo dinámicamente a medida que la ventana cambia de tamaño.

¿Existe alguna solución elegante, sin complementos de terceros, para implementar dicha variable una vez y usarla en múltiples componentes, sin tener que agregar detectores de eventos por separado dentro de cada uno de ellos?

Intenté definir windowWidth en main.js como una propiedad global y agregar un detector de eventos de ventana:

 import { createApp, ref } from "vue"; import App from "./App.vue"; import router from "./router"; const app = createApp(App).use(router); app.config.globalProperties.breakpoints = { sm: 768, md: 1024, lg: 1200, }; app.config.globalProperties.winWidth = ref(window.innerWidth); window.addEventListener( "resize", () => (app.config.globalProperties.winWidth = window.innerWidth) ); app.use(router); app.mount("#app");

Pero el valor no cambia cuando cambio el tamaño de la ventana (llamando a winWidth dentro de una etiqueta <p> en un componente para probar).

¡Me encantaría aprender a implementar esto con éxito!