ui-modal.vue

<style lang="sass" scoped>
  @import '../sass/common';
  @import '../sass/animatecss';

  .ui-modal {
    display: flex;
    justify-content: center;

    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background-color: colour-rgba('black', 0.2);
    overflow: hidden;

    @include z-index('modal');

    .ui-modal-content {
      align-self: center;
    }
  }

  .v-transition {
    @extend .animated;

    .ui-modal-content {
      @extend .animated;
      animation-duration: .5s;
    }
  }

  .v-enter {
    @extend .fadeIn;

    .ui-modal-content {
      @extend .fadeInUpBig;
    }
  }

  .v-leave {
    @extend .fadeOut;

    .ui-modal-content {
      @extend .fadeOutDownBig;
    }
  }
</style>

<template>
  <div>
    <div transition class="ui-modal" v-if="visible" @click="containerClose" v-transfer-dom>
      <div class="ui-modal-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ui-modal',

    data () {
      return {
        visible: false
      }
    },

    methods: {
      show () {
        this.visible = true
      },

      close () {
        this.visible = false
        this.$dispatch('close')

      },
      containerClose () {
        if( event.target.classList.contains('ui-modal') ) {
          this.close()
        }
      }
    }

  }
</script>

v-modal-example.vue

<style lang="sass" scoped>
  @import '../sass/common';
</style>

<template>
  <div class="v-modal-journey">
    <ui-modal v-ref:modal>
      <h1 slot="name">My modal header</h1>
      <div name="content">
        My modal contents
      </div>
      <div name="footer">
        My modal footer
      </div>
    </ui-modal>
  </div>
</template>

<script>
  import UiModal            from '../components/ui-modal.vue'

  export default {

    computed: {
      visible () {
        return this.$refs.modal.visible
      },
    },

    components: {,
      UiModal,
    },

    events: {
      'example-modal:show' () {
        return this.$refs.modal.show()
      },

      'example-modal:close' () {
        return this.$refs.modal.close()
      },
    },
  }
</script>