Estoy usando @nuxtjs/composition-api en mi aplicación Nuxt con Vuetify . Tengo un archivo componible como este:
// composables/dialog.js // https://www.npmjs.com/package/vuetify-dialog import { useContext } from '@nuxtjs/composition-api' export function useDialog () { const { $dialog } = useContext() // for some reason $dialog is undefined here const { message, error, info, warning, notify } = $dialog function showInfo (title, text) { return info({ title, text }) } function messageSuccess (text) { return message.success(text) } // ... some other functions with message, error, info, warning return { $dialog, showInfo, messageSuccess, // ... } } El módulo $dialog está registrado correctamente en nuxt.config.js: $dialog docs
{ modules: [ // Simple usage 'vuetify-dialog/nuxt', // ... other modules ] } Cuando accedo primero a una página que no usa este componible y luego navego a otra página que usa el componible, funciona bien. Sin embargo, si abro directamente la página que usa el componible, muestra que el error cannot destructure property 'message' of '$dialog' as it is undefined . Ocurre en producción y env local.
import { useDialog } from '~/composables/dialog' const { showInfo, messageSuccess } = useDialog() ¿Existe alguna limitación con los archivos componibles y @nuxtjs/composition-api ?