How to add meta in nuxt router?

Question

In vue, we defined meta like this:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

But how do we define meta in nuxt?

Answer 1

You can use vue-router meta as custom component property. https://github.com/nuxt/nuxt.js/issues/1687#issuecomment-331870619

Simple example https://github.com/nuxt/nuxt.js/tree/2.x/examples/routes-meta

Answer 2

I built a Nuxt module that basically injects page variables into the route.meta property at build time. Then you can use it inside this.extendRoutes or to generate sitemap routes with @nuxtjs/sitemap .

Install it via npm install nuxt-route-meta and add it to your nuxt.config.js :

// nuxt.config.js

export default {
  modules: [
    'nuxt-route-meta',
  ],
}

Add meta properties in a page:

export default {
  auth: true,
  meta: {
    theme: 'water',
  },
}

And now you have the properties in route.meta in each route. You can for example check it by using this.extendRoutes inside a module:

export default function () {
  this.extendRoutes(routes =>
    routes.forEach(route => {
      if (route.meta.auth) {
        // do something with auth routes
      }
    })
  )
}

Answer 3

You can add to the page you want the meta data to be rendered in. Inside you page you put

export default {
  head() {
    return {
      title: 'My Page title',
    }
  },
  data() { ... }
}

see - https://nuxtjs.org/api/pages-head

If you'd like to have all pages share some values you can place meta info in your nuxt.config.js like so

module.exports = {
  head: {
    htmlAttrs: {
      lang: 'EN'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'marketing website' },
      { name: 'theme-color', content: '#0394da' }
    ]
  }
}

see - https://nuxtjs.org/api/configuration-head

for list of all meta attributes go here https://github.com/declandewet/vue-meta