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>

<script>
export default {
  auth: true,
  meta: {
    theme: 'water',
  },
}
</script>

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

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

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

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

Supported APIs

Plain object

<script>
export default {
  auth: true,
  meta: {
    theme: 'water',
  },
}
</script>

This API does not make much sense with TypeScript because you do not have type information in the components.

Options API

<script>
import Vue from 'vue'

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

As of writing this, Nuxt with TypeScript 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>
import Vue from 'vue'

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

Property decorator

Plain JavaScript: Install nuxt-property-decorator.

<script>
import { Vue, Component } from 'nuxt-property-decorator'

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

TypeScript:

<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. When setting up your nuxt project, make sure to follow the @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! ❤️

See also

• nuxt-mail: Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.
• nuxt-modernizr: Adds a Modernizr build to your Nuxt.js app.
• nuxt-mermaid-string: Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.
• nuxt-content-git: Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.
• nuxt-babel-runtime: Nuxt CLI that supports babel. Inspired by @nuxt/typescript-runtime.

License

MIT License © Sebastian Landwehr