Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dword-design/nuxt-route-meta

Adds Nuxt page data to route meta at build time. Also supports TypeScript.
https://github.com/dword-design/nuxt-route-meta

auth authentication frontend javascript meta-data node nodejs npm npm-package nuxt nuxt-module nuxtjs nuxtjs-module page pages route router vue vue-router webdevelopment

Last synced: about 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/dword-design/nuxt-route-meta
Owner: dword-design
License: other
Created: 2020-08-19T14:02:24.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-05-01T12:33:04.000Z (8 months ago)
Last Synced: 2024-05-01T15:33:46.170Z (8 months ago)
Topics: auth, authentication, frontend, javascript, meta-data, node, nodejs, npm, npm-package, nuxt, nuxt-module, nuxtjs, nuxtjs-module, page, pages, route, router, vue, vue-router, webdevelopment
Language: JavaScript
Homepage:
Size: 3.14 MB
Stars: 43
Watchers: 2
Forks: 4
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

README

# 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

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](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

definePageMeta({
auth: true,
})

```

## TypeScript

The module has built-in support for TypeScript.

```js

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

```

## 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