Nuxt.js: How do I change the meta for routes?

[Exitialis]

I need to create a component for breadcrumbs, and for it I need to add an addition in the form of meta to all routes. How can I do it? For example:
[ { name: 'profile', path: '', component: '...', meta: { breadcrumb: 'Профиль' } }, ]

_{This question is available on Nuxt.js community (#c876)}

[alexchopin]

Hi,
We don't have support for meta in vue-router, but you can use vuex-router-sync as a nuxt plugin.

import { sync } from 'vuex-router-sync'
export default ({app: {store, router}}) => {
  sync(store, router)
}

[EasonShen1989]

I have the same problem with you. how to solve this problem @Exitialis

[Exitialis]

@EasonShen1989 I created a simple component that relates the names of routers to paths.

Example:

<template>
    <ol class="breadcrumb">
        <li v-for="item in crumbs" class="breadcrumb-item">
            <nuxt-link :to="item.path" active-class="active">
                {{ item.breadcrumb }}
            </nuxt-link>
        </li>
    </ol>
</template>

<script>
  const breadcrumbs = {
    // You should use / + name for the root route
    '/profile': 'Profile',
    // And just name of the page for child routes
   'profile-account': 'Account' 
  }

  export default {
    computed: {
      crumbs () {
        let crumbs = []
        this.$route.matched.forEach((item) => {
          if (breadcrumbs[item.name] || breadcrumbs[item.path]) {
            item.breadcrumb = breadcrumbs[item.name] || breadcrumbs[item.path]
            crumbs.push(item)
          }
        })

        return crumbs
      }
    }
  }
</script>

[EasonShen1989]

I tried, failed, the length of this.$route.matched always be equal to 1 @Exitialis

[Exitialis]

@EasonShen1989 It's because you have error in your pages directory. You should structure your pages directory like described here.

[EasonShen1989]

Well, thank you for speaking with you.I hope we can be friends. @Exitialis

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.