Newts Parading Majestically

    nuxt-route-meta

    2.3.4 • Public • Published

    nuxt-route-meta

    npm version Linux macOS Windows compatible Build status Coverage status Dependency status Renovate enabled
    Open in Gitpod Buy Me a Coffee PayPal Patreon

    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:

    Buy Me a Coffee  If you want to send me a one time donation. The coffee is pretty good 😊.
    PayPal  Also for one time donations if you like PayPal.
    Patreon  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

    Install

    npm i nuxt-route-meta

    DownloadsWeekly Downloads

    3,041

    Version

    2.3.4

    License

    MIT

    Unpacked Size

    18.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • dword-design