There are three types of route middleware in Nuxt.
Route Middleware

Layout Middleware are also known as group middleware and they are registered in layouts.

Layout middleware makes it more convenient to assign a single middleware to specific set of pages. Register middleware at layout level and simply use this layout for a group of pages.

Let's create a middleware, and call it layout-middleware.js

// middleware/layout-middleware.js
export default () => {
    console.log("2. Layout middleware called");

Add the middleware on default layout.

// layouts/default.vue
export default {
    middleware: "layout-middleware"

Default layout is applied to all pages by default.

So, use npm run dev and access routes where default layout is available on localhost:3000. Note how layout middleware has run after the app-wide middleware.

Image goes here

All middleware discussed here receives Nuxt context, and context can be very powerful here to perform various checks and verifications to control the application flow.

// middleware/layout-middleware.vue
export default ({ store, redirect }) => {
    // if user is not authenticated, redirect on login page
    if (!store.state.authenticated) {
        return redirect("/login");