Nuxt•2w ago

Nuxt Context error despite onNuxtReady

Hello I have the following error : Uncaught Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables. Problem is, the error is from this code (in a composable) :

    constructor() {
        onNuxtReady(async () => {
            this._getAuth()
            if (this.isAuthenticated && this.isExpired)
                this.logout()
        })
    }

    constructor() {
        onNuxtReady(async () => {
            this._getAuth()
            if (this.isAuthenticated && this.isExpired)
                this.logout()
        })
    }

Isn't the goal of onNuxtReady to avoid this problem ? what am I doing wrong ? Thanks 🙂

3 Replies

kapa.ai•2w ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is related to how Nuxt manages its context and when composables can be safely called. Let's break down the issue and explain why onNuxtReady doesn't solve the problem in this case. The error message suggests that a composable (likely useNuxtApp or a similar Nuxt-specific composable) is being called outside of the appropriate context. This can happen even when using onNuxtReady. Here's why: 1. onNuxtReady is designed to run code after your app has finished initializing, but it doesn't change the context in which the code runs Docs > Api > Utils > onNuxtReady (https://nuxt.com/docs/api/utils/on-nuxt-ready). 2. The error is likely occurring because you're trying to use Nuxt composables inside a class constructor, which is not one of the safe places to use them Docs > Guide > Concepts > Auto-imports > Vue and Nuxt composables Part 1 (https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables). 3. Nuxt composables are designed to be used in specific contexts such as plugins, Nuxt hooks, Nuxt middleware, or Vue setup functions Docs > Guide > Going-further > NuxtApp (https://nuxt.com/docs/guide/going-further/nuxt-app#the-nuxt-context). To fix this issue, you have a few options: 1. Move the logic to a composable or plugin: Instead of using a class constructor, consider creating a composable or plugin where you can safely use Nuxt composables. 2. Use runWithContext: If you must use this structure, you can use nuxtApp.runWithContext to ensure the Nuxt context is available Docs > Api > Composables > useNuxtApp > Properties > runWithContext > A Deeper Explanation of Context Part 1 (https://nuxt.com/docs/api/composables/use-nuxt-app#a-deeper-explanation-of-context). Here's an example of how you might refactor your code:

export const useAuth = () => {
  const nuxtApp = useNuxtApp()

  onNuxtReady(async () => {
    nuxtApp.runWithContext(() => {
      _getAuth()
      if (isAuthenticated.value && isExpired.value) {
        logout()
      }
    })
  })

  // Define your methods (_getAuth, logout) and reactive properties (isAuthenticated, isExpired) here
}

export const useAuth = () => {
  const nuxtApp = useNuxtApp()

  onNuxtReady(async () => {
    nuxtApp.runWithContext(() => {
      _getAuth()
      if (isAuthenticated.value && isExpired.value) {
        logout()
      }
    })
  })

  // Define your methods (_getAuth, logout) and reactive properties (isAuthenticated, isExpired) here
}

Then you can use this composable in your component or page setup function:

<script setup>
const auth = useAuth()
</script>

<script setup>
const auth = useAuth()
</script>

This approach ensures that Nuxt composables are called within the correct context, avoiding the "Nuxt instance unavailable" error. Remember, it's generally best to structure your Nuxt application to use composables and lifecycle hooks provided by the framework, rather than relying on class-based structures that may not align well with Nuxt's architecture. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•2w ago

perfect, fixed, thanks

Gaming

Programming

Nuxt Context error despite onNuxtReady