composables/route-middleware

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

defineNuxtRouteMiddleware signature

defineNuxtRouteMiddleware is a function that takes a callback receiving (to, from) parameters representing the next and current routes. It is used to define route middleware that runs before navigation to a particular route.

Three kinds of route middleware

Nuxt provides three kinds of route middleware: (1) Anonymous or inline route middleware defined directly within a page, (2) Named route middleware placed in app/middleware/ and automatically loaded via asynchronous import when used on a page, and (3) Global route middleware placed in app/middleware/ with a .global suffix that runs on every route change.

Middleware naming normalization

Middleware names are normalized to kebab-case. For example, myMiddleware becomes my-middleware.

Middleware file registration rules

Only files at the top level of the middleware directory or index files within any subdirectories are registered. An index file takes its name from the folder that contains it, so middleware/auth/index.ts is registered as auth.

Route middleware vs server middleware

Route middleware run within the Vue part of a Nuxt app and are completely different from server middleware, which are run in the Nitro server part of the app.

Middleware return values

Middleware can return the following values: nothing (simple return or no return) does not block navigation and moves to the next middleware; return navigateTo('/') redirects to the given path with a 302 code by default; return navigateTo('/', { redirectCode: 301 }) redirects with a 301 code; return abortNavigation() stops the current navigation; return abortNavigation(error) rejects the navigation with an error.

Middleware execution order

Middleware runs in the following order: (1) Global Middleware, (2) Page defined middleware in the order declared with array syntax.

Global middleware alphabetical execution

By default, global middleware is executed alphabetically based on the filename. To control specific order, prefix global middleware with 'alphabetical' numbering such as 01.setup.global.ts and 02.analytics.global.ts. Filenames are sorted as strings, not numeric values.

Middleware execution on server-rendered pages

If a site is server-rendered or generated, middleware for the initial page is executed both when the page is rendered on the server and again on the client. This behavior can be avoided using import.meta.server, import.meta.client checks, or checking nuxtApp.isHydrating and nuxtApp.payload.serverRendered.

Accessing route in middleware - use to and from parameters

Always use the to and from parameters in middleware to access the next and previous routes. Avoid using the useRoute() composable in middleware because there is no concept of a 'current route' in middleware, as middleware can abort navigation or redirect to a different route. The useRoute() composable will be inaccurate in this context.

Middleware with error page rendering

If middleware throws an error on the server and an error page is rendered, the middleware will still run again in the browser. Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. The useError() composable can be used in middleware to check if an error is being handled.

Give your agent this brain