[Vuejs]-Cannot import Popper.js in VueJS

by

2👍

✅

I think you should do this

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

and not as you have above i.e

import Popper from "@popperjs/core";

see here: module bundlers

👤Allan Maina

6👍

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

👤Emmanuel Ogoma

0👍

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);
    });
  }
};
👤PaKo Anguiano

Leave a comment