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