I’m using @nuxtjs/composition-api
in my Nuxt application with Vuetify
. I have a composable file like this:
// 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,
// ...
}
}
The module $dialog
is correctly registered in nuxt.config.js: $dialog docs
{
modules: [
// Simple usage
'vuetify-dialog/nuxt',
// ... other modules
]
}
When I access first a page that doesn’t use this composable and then navigate to another page that uses the composable, it works fine. However, if I directly open the page that uses the composable, it shows the error cannot destructure property 'message' of '$dialog' as it is undefined
. It happens in production and local env.
Is there any limitation with composable files and @nuxtjs/composition-api
?