Popover with vue.js and bootstrap 4

Question

I'm trying to add popovers from bootstrap 4 into my vue.js app. I could probably use something like https://www.npmjs.com/package/vue-popperjs , but I'd like to make it work old way, without using additional libraries (just so I could figure out the principle on how to do that)

I have installed Popper.js with npm install --save popper

In my webpack.config.js I also have:

 plugins: [
        new WebpackNotifierPlugin(),
        new webpack.ProvidePlugin({
            _: 'lodash',
            $: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery',
            jQuery: 'jquery',
            popper: 'popper'
        })
    ],

Then I'm tring to build a vue component:

<template>
   ....
    <button type="button" class="btn btn-link" title="" data-container="body" data-toggle="popover" data-placement="bottom"  data-original-title="Connection String" aria-describedby="popover253231">
                                        Click to show 
                                    </button>
   ....
</template>
<script>
    const _ = require("lodash");
    const $ = require("jquery");
    // This doesn't work
    //const poppper = require("popper");
     var d = {
        data() {
           ...
        },
        created: function() {
           // Load data with $http module
        },
        updated: function() {
            $(function () {
                $('[data-toggle="popover"]').popover()
            })
        },
    };

    export default d;
</script>

The button will appear only after load, because it has a parent element that has v-for binding on the data loaded with ajax.

I don't know how to require popper , so the line $('[data-toggle="popover"]').popover() resolves (it cannot find function popover() )

Also the line const popper = require("poppper") doesn't work either with the error Module parse failed: 'return' outside of function . My guess is that I can't load popper with require , because it is not built for it.

Answer 1

After some struggling and trying completely random ideas, I had the one that worked. Turns out the problem was that I was using bootstrap that is installed into ASP.NET MVC as a bundle (so it added it as <script src='..'/> to the page). So after I:

1. npm install --save bootstrap

2. Added bootstrap: 'bootstrap' to ProvidePlugin definition in webpack.config.js

3. Added require("bootstrap") into my vue file

It started to work. I didn't even have to require 'popper' for some reason - probably because bootstrap already contains it?

Though I am still not sure whether this is a proper way to solve the problem

Answer 2

Using Vuejs Directive

const bsPopover = (el, binding) => {

const p = []

if (binding.modifiers.focus) p.push('focus')
if (binding.modifiers.hover) p.push('hover')
if (binding.modifiers.click) p.push('click')
if (!p.length) p.push('hover')

$(el).popover({
    animation: false,
    placement: binding.arg || 'top',
    trigger: p.join(' '),
    html: !!binding.modifiers.html,
    content: binding.value,
});}

Vue.directive('tooltip', {
bind: bsTooltip,
update: bsTooltip,
unbind (el) { $(el).tooltip('dispose') }});