localization breadcrumbs

[chnbohwr]

is it possible to localization breadcrumbs ? for example, my website has three languages (Eng, Fr, Span) How to translate breadcrumbs?

Thanks.

[samturrell]

Hi @chnbohwr,

You could do something like this

router.map({
  '/': {
    component: Page,
    breadcrumb: {
      english: 'Home Page',
      french: '...',
      spanish: '...'
    }
    subRoutes: {
      '/foo': {
        component: Foo,
        breadcrumb: {
          english: 'Foo Page',
          french: '...',
          spanish: '...'
      },
    }
  }
})

And then you can access this.$breadcrumbs in your vue component where you can add logic of which one to show e.g.

<nav class="breadcrumbs" v-if="$breadcrumbs.length">
    <ul>
        <li v-for="(i, crumb) in $breadcrumbs">
            <a v-link="crumb">{{ crumb.handler.breadcrumb[selectedLanguage] }}</a>
        </li>
    </ul>
</nav>

Let me know if this works for you :)