Nuxt•3mo ago

RouteMiddleware Can only run once

the code is here:

export default defineNuxtPlugin(() => {
  addRouteMiddleware('auth', () => {
    console.log('This global middleware is added in the plugin and will run on every routing change')
  }, { global: true })
})

export default defineNuxtPlugin(() => {
  addRouteMiddleware('auth', () => {
    console.log('This global middleware is added in the plugin and will run on every routing change')
  }, { global: true })
})

I've found that it can only run when I first enter the web page.But it should run when the route is chaning.

8 Replies

kapa.ai•3mo ago

Hi @Volatile. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt, global route middleware registered with addRouteMiddleware (with { global: true }) is designed to run on every route change, not just on the initial page load. Your code is correct for registering a global middleware:

export default defineNuxtPlugin(() => {
  addRouteMiddleware('auth', () => {
    console.log('This global middleware is added in the plugin and will run on every routing change')
  }, { global: true })
})

export default defineNuxtPlugin(() => {
  addRouteMiddleware('auth', () => {
    console.log('This global middleware is added in the plugin and will run on every routing change')
  }, { global: true })
})

If you observe that the middleware only runs on the first page load and not on subsequent route changes, this is not the expected behavior according to the official documentation. The middleware should execute on every route navigation, both on the initial load and on client-side navigations via <NuxtLink> or programmatic navigation. This is confirmed in the docs, which state:

addRouteMiddleware() is a helper function to dynamically add middleware in your application. ... Global route middleware can be defined ... and will be run on every route change.

addRouteMiddleware documentation If your middleware is not running on every route change, possible reasons could include: - The navigation is a full page reload (not a client-side navigation). - There is an error in the plugin registration or middleware logic. - There is a caching or hydration issue. You may want to check that: - You are navigating using <NuxtLink> or programmatic navigation, not full page reloads. - The plugin is properly loaded and not conditionally excluded. - There are no errors in the browser console that might prevent the middleware from running. If the issue persists and you are following the documented approach, it may be a bug or an environment-specific issue. In that case, consider reporting it or checking for related issues in the Nuxt repository. For more details, see the official documentation on addRouteMiddleware and middleware usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

VolatileOP•3mo ago

@kapa.ai but i found that the output will only be one no matter how i change the route

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the official Nuxt documentation, global route middleware registered with addRouteMiddleware and { global: true } should run on every route change, not just once. The documentation provides this example:

export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-middleware', (to, from) => {
    console.log('global middleware that runs on every route change')
  }, { global: true })
})

export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-middleware', (to, from) => {
    console.log('global middleware that runs on every route change')
  }, { global: true })
})

It explicitly states that this middleware "will be run on every route change" addRouteMiddleware API. If you are only seeing the output once, even when navigating between routes, this is not the expected behavior according to the documentation. The knowledge sources do not mention any limitation that would cause global middleware to run only once per session or only on the initial load. They also do not describe any known bug or caveat that would explain this behavior. If you are experiencing this issue, it may be due to factors outside the documented Nuxt middleware system (such as navigation method, plugin registration, or a specific project setup), but the knowledge sources do not provide further troubleshooting steps or explanations for this scenario. In summary:
According to the official documentation, your middleware should run on every route change, and the behavior you describe is not expected or documented. The knowledge sources do not contain enough information to explain why you are seeing the output only once addRouteMiddleware API. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Cue•3mo ago

Log out the to value and see if this is still the case.

VolatileOP•3mo ago

@Cue after i open the browser dev mode, i found that all the to values were on browser console rather than nodejs console.Then i have known that the routeMiddle runs on client side it only run once on server side(because it log once when i first entered pages), and always run on client side

Cue•3mo ago

Correct. It will log on server, then client once hydrated, and then subsequently client only. That’s universal SSR in a nutshell.

Gaming

Programming

RouteMiddleware Can only run once

Did you find this page helpful?