I'm looking to integrate popovers from Bootstrap 4 into my Vue.js app. While I could use something like
https://www.npmjs.com/package/vue-popperjsTo start, I have installed Popper.js using npm install --save popper.
In my webpack.config.js, I've included the following:
plugins: [
new WebpackNotifierPlugin(),
new webpack.ProvidePlugin({
_: 'lodash',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery',
popper: 'popper'
})
],
Next, I attempt to create 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");
var d = {
data() {
...
},
created: function() {
// Load data with $http module
},
updated: function() {
$(function () {
$('[data-toggle="popover"]').popover()
})
},
};
export default d;
</script>
The button only becomes visible once it is loaded, due to its parent element having a v-for binding on data fetched via Ajax.
I am encountering difficulties in requiring popper, as the line
$('[data-toggle="popover"]').popover()popover() function).
Furthermore, attempting to load popper using require results in an error stating "Module parse failed: 'return' outside of function." This suggests that popper may not be compatible with the standard JS require method.