I was following this tutorial in order to learn how to make popovers in my VueJS app.
When I compiled the projects I got an error that says:
[Vue warn]: Error in data(): "TypeError: _popperjs_core__WEBPACK_IMPORTED_MODULE_0__.default is undefined"
I traced the problem to the BasePopover.vue
component - first <script>
line that says import Popper from "popper.js";
In my application I changed that to import Popper from "@popperjs/core";
but the error still keeps appearing.
So I followed the official Popper.js tutorial to simplify things.
I installed via npm i @popperjs/core
(also tried using VueCLI
as seen in the image below and via npm install @popperjs/core --save
).
This is my current code:
<template>
<div id="app">
<button id="button" aria-describedby="tooltip">My button</button>
<div id="tooltip" role="tooltip">My tooltip</div>
</div>
</template>
<script>
//import Popper from "@popperjs/core/lib/popper";
import Popper from "@popperjs/core";
export default {
name: "TestView",
components: {
},
data() {
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
Popper.createPopper(button, tooltip);
return {
};
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
padding: 350px 0;
background-color: #C4DFD1;
}
</style>
I don't know what else to do. Any help is appreciated!