Cannot import Popper.js in VueJS

Question

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!

Answer 1

import { createPopper } from '@popperjs/core';

export default {
name: "TestView",
components: {
},
data() {
return {
};
},
mounted(){
  const button = document.querySelector('#button');
  const tooltip = document.querySelector('#tooltip');
  createPopper(button, tooltip);
}
};

Instead of ids you should use refs(I have not used them here to avoid confusing you), which will ensure that there is no clash, since you app can have multiple elements with the same Id, eg #button. When using UI library like popper js, always try and put their code in the mounted hook, the mounted hook ensures that the elements you are targeting eg #button are in the dom

Answer 2

I think you should do this

import { createPopper } from '@popperjs/core';

and not as you have above ie

import Popper from "@popperjs/core";

see here: module bundlers

Answer 3

You must add this.$nextTick for the code that will run only after the entire view has been rendered ( https://vuecomponent.com/integrations/popperjs.html )

import { createPopper } from '@popperjs/core';
      
export default {
  name: "TestView",
  components: {
  },
  data() {
    return {
    };
  },
  mounted(){
    this.$nextTick(() => {
      const button = document.querySelector('#button');
      const tooltip = document.querySelector('#tooltip');
      createPopper(button, tooltip);
    });
  }
};