This demo shows example of how middleware works in Nuxt

Nuxt offers middleware both for client side and server side. Client side middlewares can be bound to certain components via definePageMeta or can run before each routing event thanks to *.global.ts filename. Server middlewares are being executed before each server API call.

1. git checkout demos-nuxt project
2. cd nuxt-middlware
3. pnpm install
4. pnpm dev
5. localhost:3000

The behavior of each middleware is demonstrated by the log messages in the browser console (F12). Navigate through the app and interact with the UI to see what is happening when.

https://master-coda.cz/article/nuxt-middleware