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.

import { useDialog } from '~/composables/dialog'

const { showInfo, messageSuccess } = useDialog()

Is there any limitation with composable files and @nuxtjs/composition-api ?

Github Issue