Sometimes you want to be able to run code before navigating to a specific route. A practical example of this might be checking to see if a user is logged in or not and then allowing access accordingly. The solution for such a need in Nuxt is called route middleware. And we can define route middleware in several different ways.
Let's first take a look at defining what's known as inline route middleware. view under the movies directory, I'll add a script setup section and then call the define page meta function. Here, I want to define the middleware option. Now, middleware here is a method that accepts a to and from parameter.
These to and from arguments represent the route that is being navigated to and the route that is being navigated from. So let's just console log each of those here. Awesome. Now, over in the browser, let's navigate to this movies page.
You'll notice in the console that we have the route that we navigated to. So it has the full path of slash movies, which matches up with where we have landed. And then we have the route that was navigated from. In our case, that was the home page.
If I were to clear out the console here and start on the page with our middleware, let's just hit refresh to do that. then you see we still get the proper console logs. And if we check things out in the development server, you'll notice that the middleware ran on the server side as well. Back in the browser, though, navigating to any other page does not produce the console logs.
Awesome. So when we define middleware on a particular page like this, it only runs for that page. Let's say, though, that this middleware should be reusable on different pages. Well, we can use the Nuxty CLI tool in order to create our custom middleware.
In the terminal, I'll run npx nuxty add middleware. Let's name this middleware logger, since its purpose is to only log things to the console. After I run that command, you can see a middleware directory has been added in the file structure. ts file.
ts, you see export default, define Nux route middleware. Define Nux route middleware is the function we use, surprise, surprise, to define route middleware. the callback function it takes looks pretty familiar. It's exactly what we provided in the inline middleware.
So let's just copy the meet of the inline middleware and remove that inline middleware. And then we'll paste that into our standalone middleware here. By the way, this standalone middleware that's defined inside of the middleware directory is known as named middleware. I'll also add just one more piece into the console log, just so we can make sure that it is actually running something different.
Awesome. Now wherever we want to use this middleware, instead of providing a function, we can say middleware and then give it an array of the name middleware that we'd like to run. Great. Back in the browser now, let me clear out the console so things are easy to see.
And this time when I visit movies, we do get the to routes log as well as our new message. If then I wanted to reuse this exact same middleware on multiple pages, I could just register it using this same array. So I don't have to redefine the functionality per page. The last type of route middleware is called global route middleware.
and it applies to all the routes in your app, whether they have the middleware defined in the page meta or not. global. view. back over in the browser, no matter what page I visit now, we get the console log every single time.
In conclusion, route middleware can be defined in three different ways, as inline route middleware, as named route middleware, or as global route middleware.