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.

Compatibility

nuxt-route-meta	Nuxt
<= 5	2
>= 6	3

Install

# npm
$ npx nuxi module add nuxt-route-meta

# Yarn
$ yarn nuxi module 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 nuxt.hook('pages:extend') in a module:

export default defineNuxtModule((options, nuxt) =>
  nuxt.hook('pages:extend', routes =>
    for (const route of routes) {
      if (route.meta.auth) {
        // do something with auth routes
      }
    }
  )
)

Composition API

<script setup>
definePageMeta({
  auth: true,
})
</script>

TypeScript

The module has built-in support for TypeScript.

<script lang="ts">
export default defineComponent({
  auth: true,
  meta: {
    theme: 'water',
  },
})
</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