Nuxt is a framework on the top of the Vuejs, it help developers to build project with lots features, such as data fetching, automatic routes and many more.

Middle wares are the functions (stored in a folder called middleware) that render before Page or layout .

Middleware function

Create a standard function in the middleware folder, note that the name of the file will be the name of the middle ware. In our example it is a simple log function. The async function uses application context as the first argument.

//greeting.js export default async function (context) {    console.log('I am a middleware')   }; 

Use middleware in all routes/pages

How to use a middleware in all page ? We can use the Nuxt config for that. Use the router section to pass the middleware to all the routes

//nuxt-config.js export default {    target: 'static',       router: {     middleware: 'greetings'   }, ...

Name of the middleware function file will be name of the function.

Following Nuxt Posts may help you to learn more


This free site is ad-supported. Learn more