Nuxt•2mo ago

useRoute inside plugin

Is this suggestion correct?

Don't call useRoute inside a Nuxt plugin setup—it's only available in component
contexts. Instead, read the route name from the router instance on the Nuxt app.
This ensures the plugin works both on server and client side.

Don't call useRoute inside a Nuxt plugin setup—it's only available in component
contexts. Instead, read the route name from the router instance on the Nuxt app.
This ensures the plugin works both on server and client side.

plugin is something like this:

export default defineNuxtPlugin({
  name: 'plugin',
  parallel: true,
  setup: async () => {
    const route = useRoute();
    if (route.name === 'my-route') {
      doSomething()
    }
  },
});

export default defineNuxtPlugin({
  name: 'plugin',
  parallel: true,
  setup: async () => {
    const route = useRoute();
    if (route.name === 'my-route') {
      doSomething()
    }
  },
});

if true, show sources

5 Replies

kapa.ai•2mo ago

Hi @JuanMCe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your suggestion is correct: You should not call useRoute inside a Nuxt plugin's setup function. The official Nuxt documentation explicitly states that useRoute should only be used in the setup function of a Vue component or in a Nuxt plugin, but with an important caveat—using it in a plugin is only valid if the plugin is executed in a component context (e.g., when providing helpers that will be used in components). In most cases, calling useRoute directly in a plugin's setup (especially at the top level) is not recommended and can lead to unexpected behavior, because there is no concept of a "current route" in the plugin context during app initialization. From the docs:

The useRoute() composable should only be used in the setup function of a Vue component or in a Nuxt plugin.

This applies to any composable that uses useRoute() internally too.

However, the context here is important: if your plugin is running outside of a component context (such as during app initialization), useRoute will not work as expected. Instead, you should use the router instance (from useRouter or nuxtApp.$router) to access route information in a way that is safe for both server and client contexts. Example from the docs:

Using useRoute in middleware is not recommended because it can lead to unexpected behavior. There is no concept of a "current route" in middleware. The useRoute() composable should only be used in the setup function of a Vue component or in a Nuxt plugin.

But the same applies to plugins that are not running in a component context. So your code:

export default defineNuxtPlugin({
  name: 'plugin',
  parallel: true,
  setup: async () => {
    const route = useRoute(); // ❌ Not recommended here
    if (route.name === 'my-route') {
      doSomething()
    }
  },
});

export default defineNuxtPlugin({
  name: 'plugin',
  parallel: true,
  setup: async () => {
    const route = useRoute(); // ❌ Not recommended here
    if (route.name === 'my-route') {
      doSomething()
    }
  },
});

is not recommended. Instead, you should use the router instance to access route information in a plugin context. Sources:
Nuxt 3 useRoute API docs
Nuxt 4 useRoute API docs ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

JuanMCeOP•2mo ago

@kapa.ai show me the fixed code

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Here is the corrected approach for your Nuxt plugin:
Do not use useRoute() directly in the plugin setup.
Instead, access the router instance and use its methods to get route information.

export default defineNuxtPlugin({
  name: 'plugin',
  parallel: true,
  setup: async (nuxtApp) => {
    const router = nuxtApp.$router
    // For example, get the current route name:
    const currentRoute = router.currentRoute.value
    if (currentRoute.name === 'my-route') {
      doSomething()
    }
  },
});

export default defineNuxtPlugin({
  name: 'plugin',
  parallel: true,
  setup: async (nuxtApp) => {
    const router = nuxtApp.$router
    // For example, get the current route name:
    const currentRoute = router.currentRoute.value
    if (currentRoute.name === 'my-route') {
      doSomething()
    }
  },
});

This approach avoids the pitfalls of using useRoute in a plugin context, as recommended in the official documentation. The docs state that useRoute should only be used in the setup function of a Vue component or in a Nuxt plugin, but not in a context where there is no current route (such as during plugin initialization) useRoute composable. If you need to react to route changes, you can also use router hooks or watchers on router.currentRoute. Summary:
- Do not use useRoute in plugin setup. - Use the router instance (nuxtApp.$router) to access route information in plugins. Source: useRoute composable ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

useRoute inside plugin

Did you find this page helpful?