Popper.js

Popper.js (docs here) is a positioning library used to position one html element relative to another on a webpage. For example, consider a dropdown menu which should always be positioned underneath its trigger button without influencing the positioning of other page elements. Without Popper, this would require tracking the position of the button element and positioning the dropdown accordingly. The Popper.js library takes care of this for you.

1) Install the Popper.js package with npm

npm i --save popper.js

2) Import the package in your .vue file <script> and turn off gpuAcceleration

If you find that your Popper.js element is blurry when zooming in, it is likely due to gpuAcceleration. You can turn it off with the command below (although this may cause slowness when using many Popper elements).

import Popper from 'popper.js'
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false

3) In your mounted() hook, attach the positioned element (dropdown) to the reference element (showInputButton) using Popper

Wrap the command in the $nextTick call to make sure the page is completely loaded before positioning anything. The placement parameter controls how the second element will be positioned relative to the first.

mounted() {
  this.$nextTick(function() {
    var popper = new Popper(this.$refs["showInputButton"], this.$refs["dropdown"], {
        placement: 'bottom-start'
    });
  });
},

4) Make sure the elements are tagged appropriately with refs

Vue is able to track elements between html and javascript with the "ref" property. You can use any name you want for the ref properties, so long as they are consistent between html and javascript.

<button ref="showInputButton" class="btn-primary" @click="showInput=!showInput;">{{option}}</button>
<div ref="dropdown" v-if="showInput" class="popover-custom"></div>