nuxt-route-meta

Adds Nuxt page data to route meta at build time. Also supports TypeScript.

Nuxt pages have a meta property that allows to define meta data. These can be accessed in middlewares via route.meta at runtime. What does not work however is to access the meta data at build time in the routes object itself. This is needed when postprocessing routes via extendRoutes or the @nuxtjs/sitemap module. This module fills this gap by parsing the page files, extracting the meta data, and writing them to the meta field of each route corresponding to the page.

ℹ️ Note that this module can only extract static data from the pages at build time. It will not work with dynamic data depending on this. In case you have an idea how to improve that, feel free to open up an issue or pull request.

Install

# npm
$ npm install nuxt-route-meta

# Yarn
$ yarn add nuxt-route-meta

Usage

Add the module to your nuxt.config.js:

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

Add some properties to your pages:

<template>
  <div>Hello world</div>
</template>

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

That's it! Now you can access the meta data in route.meta from anywhere as you know it from vue-router. The module takes all properties that all properties that are not functions, and the meta property itself is merged into the result. So route.meta from the example above is { auth: true, theme: 'water' }.

Here is an example to use it inside this.extendRoutes in a module:

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

TypeScript support

The module has built-in support for TypeScript. Requirement is that the TypeScript module is installed as described in the Nuxt TypeScript docs.

Options API

As of writing this, Nuxt does not seem to support the options API with Nuxt-specific properties like asyncData, fetch, meta, etc. In case this changes, open up an issue.

Class API

<script lang="ts">
import Vue from 'vue'

export default class MyComponent extends Vue {
  meta = {
    foo: true,
  }
}
</script>

Class API with decorator

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class MyComponent extends Vue {
  meta = {
    foo: true,
  }
}
</script>

Composition API

This package ships with support for the Vue composition-api (both for javascript and typescript). When setting up your nuxt project, make sure to follow @nuxtjs/composition-api guide closely.

<script>
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  meta: {
    auth: true
  }
})
</script>

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

If you want to send me a one time donation. The coffee is pretty good 😊.
Also for one time donations if you like PayPal.
Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️

License

About