/ Modal

Vue 2 Semantic-UI modal component without jQuery dependency

Vue 2 Semantic-UI modal component without jQuery dependency

Vue-Semantic-Modal

Modal component for semantic-ui without jQuery.

Usage

<modal v-model="showModal">

    <p slot="header">Confirmation needed</p>

    <p slot="content">Do you want to continue?</p>

    <template slot="actions">
        <div class="ui black deny button" @click="showModal=false">
          No
        </div>
        <div class="ui positive right" @click="confirm">
          Yes
        </div>
    </template>

</modal>
import modal from 'vue_semantic_modal'

export default {
  components: {
    modal
  },
  data() {
    return {
        showModal: true,
        confirmed: true
    }
  },
  methods () {
    confirm () {
        this.confirmed = true
        this.showModal = false
    }
  }
}
  //...

Include in the root component semantic-ui CSS:

@import '~dist/semantic.css';

Slot

  • header

  • content

  • actions

GitHub