How to make a component with reuse of other components?

Question

Vue.js

To use vue with bootstrap I tried bootstrap-vue. in principle, everything worked, I want to make "beauty".
When using vue-router, the router-link component is rendered in when used in the header, the b-nav-item component is rendered in If done manually instead of b-nav-item<a>
<li class="nav-item"><a class="nav-link">

<li class="nav-item"><router-link class="nav-link">

- then everything works.
I wanted to make my own b-router-link component, which would implement this with one tag.
Here is a component that works (without using router-link):

Vue.component('b-router-link', {
  template: '<li class="nav-item"><a class="nav-link"><slot/></a></li>'
})

but this one is not:

Vue.component('b-router-link', {
  template: '<li class="nav-item"><router-link :to class="nav-link"><slot/></router-link></li>'
})

Help me get it right :)

Answer 1

I figured out the correct component is:

Vue.component('b-router-link', {
  template: '<li class="nav-item"><router-link :to="to" class="nav-link"><slot/></router-link></li>',
  props: ['to']
})

usage:

<b-router-link to="/phones">Телефоны</b-router-link>