Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Where do we define middlewares in nuxt.config.js in Nuxt 3?

I’m migrating a large application from Nuxt 2 to Nuxt 3 and I decided to create a fresh Nuxt 3 application and move code from my previous version to this one but I encountered a problem in my nuxt.config.js file when adding my old middleware array in the configuration. Here’s what it looks like:

export default defineNuxtConfig({
  // ... some other configs
  router: {
    middleware: ["redirect", "authenticated"], 
    // line above returns an error that this option doesn't exist
    base: `${process.env.ROUTER_BASE}`,
  },

I already have my middleware folder in my project structure but I want to know how should I define this in my config file, I used to have a problem in Nuxt 2 where I needed to specify the order in which my middleware functions where executed and I fixed that by setting the order in my middleware array, I’m looking for the same behavior in Nuxt 3 but I can’t find any docs on this part of my migration

Tags:

2

Answers


  1. 0

    In Nuxt 3 you can add a global route middleware by placing it into /middleware directory with a .global suffix

    For example

    middleware/
--| redirect.global.ts
--| authenticated.global.ts

    You can read about ordering them here

    Login or Signup to reply.
  2. 0

    There is this section in the docs about ordering middleware.
    Middlewares are run alphabetically, but you can have more control by using ‘alphabetical’ numbering.
    e.g

    middleware
--| 00.redirect.global.ts
--| 01.authenticated.global.ts
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search