# 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](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router) (Nuxt 2), [pages:extend](https://nuxt.com/docs/guide/recipes/custom-routing#pages-hook) (Nuxt 3), [extendPages](https://nuxt.com/docs/api/kit/pages#extendpages) or the [@nuxtjs/sitemap](https://www.npmjs.com/package/@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
```bash
# 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`:
```js
export default {
modules: [
'nuxt-route-meta',
]
}
```
Add some properties to your pages:
```html
Hello world
```
```js
```
That's it! Now you can access the meta data in `route.meta` from anywhere as you know it from [vue-router](https://www.npmjs.com/package/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:
```js
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
```js
```
## TypeScript
The module has built-in support for TypeScript.
```js
```
## Contribute
Are you missing something or want to contribute? Feel free to file an [issue](https://github.com/dword-design/nuxt-route-meta/issues) or a [pull request](https://github.com/dword-design/nuxt-route-meta/pulls)! ⚙️
## 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](https://github.com/dword-design/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](https://github.com/dword-design/nuxt-modernizr): Adds a Modernizr build to your Nuxt.js app.
* [nuxt-mermaid-string](https://github.com/dword-design/nuxt-mermaid-string): Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.
* [nuxt-content-git](https://github.com/dword-design/nuxt-content-git): Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.
* [nuxt-babel-runtime](https://github.com/dword-design/nuxt-babel-runtime): Nuxt CLI that supports babel. Inspired by @nuxt/typescript-runtime.
## License
[MIT License](https://opensource.org/license/mit/) © [Sebastian Landwehr](https://sebastianlandwehr.com)