Modals

<button class="btn btn-success" @click="showModal()">
    Open Modal
</button>

<modal :show.sync="show" v-bind:small="true" v-bind:force="true" ref="modal" :cancelClass="'none'" :okText="'CLOSE'">
  <div slot="title">Static Modal</div>
  <div>
    Modal Content
  </div>
</modal>

import Modal from '/vuestic-components/vuestic-modal/VuesticModal'
export default {
  name: 'modals',
  components: {
    Modal
  },
  methods: {
    showModal () {
      this.$refs.modal.open() // $refs property name same as in ref="modal"
    }
  }
  ...
}

transition: String -- ( default: 'modal' )
small: Boolean -- ( default: 'false ) Use v-bind:small="true" to set small size of modal
large: Boolean -- ( default: 'false ) Use v-bind:large="true" to set large size of modal
force: Boolean -- ( default: 'false ) Use v-bind:force="true" to dissallow backdrop click
okText: String -- ( default: 'CONFIRM' ) Use :okText="'Some Text Here'" to set text in confirm button
cancelText: String -- ( default: 'CANCEL' ) Use :cancelText="'Some Text Here'" to set text in cancel button
okClass: String -- ( default: 'btn btn-primary' ) Use :okClass="'custom-class'" to add prefered class to submit button
cancelClass: String -- ( default: 'btn btn-secondary' ) Use :cancelClass="'custom-class'" to add prefered class to cancel button

Find DEMOs here!