Change template inside component

[Dmytro]

Hi. I want to change template inside my component. The problem is: method getBreadcrumb(crumb.meta.breadcrumb) is not defined on the instance. How I can fix that?
example of my code:

<template id="crumbs">
  <nav v-if="$breadcrumbs.length" class="breadcrumb" aria-label="breadcrumb">
    <ul class="breadcrumb">
      <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
        <router-link :to="{ path: crumb.path }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
      </li>
    </ul>
  </nav>
</template>
<script>
import Vue from 'vue';
import breadcrumbs from 'vue-2-breadcrumbs';

Vue.use(breadcrumbs, {
  template: '#crumbs'
});

[Ivan Demidov]

@letanure Hi, try

Vue.use(breadcrumbs, {
  methods: {
    getBreadcrumbs() {...}
  },
  template: '#crumbs'
});

[Dmytro]

@letanure Hi, try

Vue.use(breadcrumbs, {
  methods: {
    getBreadcrumbs() {...}
  },
  template: '#crumbs'
});

unfortunately same error

[Ivan Demidov]

hmmm, may be

<script>
import Vue from 'vue';
import breadcrumbs from 'vue-2-breadcrumbs';

Vue.use(breadcrumbs, {
  template: '#crumbs'
});

export default {
  methods: {
    getBreadcrumbs() {...}
  }
}
</script>

if you don’t work out, put an example on a github I’ll try to solve this problem

[Dmytro]

hmmm, may be

<script>
import Vue from 'vue';
import breadcrumbs from 'vue-2-breadcrumbs';

Vue.use(breadcrumbs, {
  template: '#crumbs'
});

export default {
  methods: {
    getBreadcrumbs() {...}
  }
}
</script>

this is work, but how I can extend code of this method, for example I need something like this.

export default {
  methods: {
    getBreadcrumbs = breadcrumbs.getBreadcrumbs();
  }
}

and just use it on my template? Do you understand what I want?

[Dmytro]

[Ivan Demidov]

Do you understand what I want?

I'm not sure that I understand your idea, but it is probably worth making it as a component and reuse it.

[Dmytro]

I made as in a doc.

Vue.use(VueBreadcrumbs, {
  template:
    `<nav class="breadcrumb" v-if="$breadcrumbs.length" aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
          <router-link :to="{ path: crumb.path }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
        </li>
      </ol>
    </nav>`
});

Can I close issue?

[Ivan Demidov]

Can I close issue?

Of course, if you find a solution