Feature request: pass a component to display in the Popover

It would be really useful (at least to me) to be able to specify a Vue component to display inside the popover (when using the directive).

<span v-b-popover.hover="popoverConfig">{{ user.username }}</span>

...

data() {
    return {
        popoverConfig: {
            props: {
                user: this.user,
            },
            component: {
                name: 'profile-component',
                props: ['user'],
                template: `
                    <b-card :title="user.username" :img-src="user.avatar" img-top>
                        <p class="card-text">{{ user.bio }}</p>
                    </b-card>
                `
            }
        }
    } 
}

Inside the popover, this can be implemented with something like:

<component :is="b-popover.component" v-bind="b-popover.props"></component>

This feature would greatly enhance the popover component, making it able to display absolutely anything, encouraging modularization of code reuse.

[alsciende]

I found a solution by using a function as value for v-b-popover. It does exactly as what I need: https://jsfiddle.net/7h4tpouz/3/.

Thank you for your help. I think this feature request can be closed.

[tmorehouse]

Note that while this method works for trigger a single hover (rr focus, but not both), it may not work for click properly.

Your best (safest) bet would be to generate an HTML string with the appropriate HTML markup for a card, which has your content interpolated into the HTML string template, or use document.elementCreate(...), Element.appendChild, etc to generate a DOM structure to pass to v-b-popover