Yet another semantic-ui modal component for Vue2 without Jquery but with pure Vue transition

This component only provide a frame and transitions for modal. Configurations of an inner modal is on your own, and it should be almost identical with usual way of semantic-ui.

Set Up

  • Global set up
import YaModal from 'vue-ya-semantic-modal'

  • Local set up for each component
import YaModal from `vue-ya-semantic-modal'

export default {
  name: 'MyComponent',
  props: ['myProp'],
  components: {
    YaModal: Yamodal() // It's important to use as function


  • Basic usage
<button class="ui primary button" @click="activeModal=true">Show Modal</button>

<ya-modal verticla flip inverted v-model="activeModal">
  <div class="ui header">Title</div>
  <div class="content">
    <p>Any content for your modal</p>
  <div class="actions">
    <div class="ui red basic cancel inverted button" @click="activeModal=false">
      <i class="remove icon> No
    <div class="ui green ok inverted button @click="activeModal="false">
      <i class="checkmark icon></i> yes


  • When you want modal without transition, use :transition="false"
  • inverted attribute will be applied dimmer container
  • A transition of dimmer container is always fade
  • Possible class words for a inner modal are
bounce browser drop fade flash flip fly jiggle scale slide swing tada
vertical horizontal left right up down
basic mini tiny small medium big large