How to add route wise middleware in Nuxt

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 . For example you want to fetch posts when user visit the blog page, it can be a middle ware.

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 blog fetching function. The async function uses application context as the first argument.

//blogFetch.js
export default async function (context) {
    const document = await context.app.$prismic.api.query(
      context.app.$prismic.predicates.at("document.type", "post_type")
    );
    context.store.commit("blog/setPosts", document);
    context.store.commit("blog/setLoaded", true);
  };

Use middleware in a route/page

How to use a middleware in a page ? Add the following in the script

   middleware:'blogFetch',

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

Following Nuxt Posts may help you to learn more

• How to integrate Strapi-graphql in Nuxt 2
• Editor frameworks for JS apps
• How to setup MongoDB in Prisma
• Prismic-CMS-Nuxt slice rendering
• Prismic-CMS-Nuxt store
• Keystone CMS authentication in Nuxtjs
• Nuxt 2 ServerMiddleware
• How to use Prisma ORM with Nuxt3
• How to create API end points in Nuxt3
• How to getting started with Nuxt3