Create a floating element that expands when clicked using a Vue.js plugin


vue-balloon can be used as a plugin to create a floating elements which expand when clicked.

Live Demo

To learn how to avoid the trouble implementing your own solution for expandable elements containing any content, follow the simple example below.


To start working with the component use the following command to install it:

npm install vue-balloon --save


yarn add vue-balloon

This plugin uses font awesome icons so either include that or redefine custom icons for the classes .fa-chevron-up, .fa-chevron-down, .fa-expand, .fa-compress, .fa-close.

There are props and events below you can use to make it fit to your needs.


props: {
  // balloon title
  title: {
    default: ''

  // position: bottom-right, bottom-left, top-right, or top-left
  position: {
    default: 'bottom-right'

  // enable the css transform: scale() effect
  zooming: {
    default: false

  // hide the close (x) icon on the balloon
  hideCloseButton: {
    default: false

  // hide the concise (chevron) icons on the balloon
  hideConciseButton: {
    default: false


Using some of the options above we can create the following example:

  <div id = 'demo'>
      title = 'Advice'
      position = 'top-left'
      zooming = "true"
            @maximize = 'doThis'
      @minimize = 'doThat'
      <!-- balloon content goes here.. for example a youtube video with the vue-youtube-embed plugin -->
      <img src="" alt="">

  import { Balloon } from 'vue-balloon'

  export default {
    components: { Balloon },
    methods: {
      doThis () {
        // do stuff
      doThat () {
        // do stuff

And there it is, a expandable element placed in any corner of a window, with manageable content easy and fast.


This project is open source available on GitHub.