Bootstrap, popper.js and vue.js

Question

In my laravel application, I have page that are rendered with vue.js. I want to add some popup in this page and use popper.js. Following the documentation, this lib is included in bootstrap.bundle.min.js.

I have this in my html page:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

And I have this method in my Vue component:

        showCalendarChoiceHelpPopover() {
            console.log("click");
            $('#calendar').popover({
                trigger: 'focus',
                title: 'title',
                content: 'content'
            });
        }

When I load my page I have the following error message:

TypeError: __WEBPACK_IMPORTED_MODULE_5_jquery___default(...)(...).popover is not a function

Answer 1

Okay mate so if you use Bootstrap 4 you need to include Popper.js

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.

And remember jQuery first, then Popper.js, then Bootstrap JS