Simple Example (hover)

        <vue-flip :active-hover="true" width="200px" height="50px">
          <template v-slot:front class="front">
            front
          </template>
          <template v-slot:back class="back">
            back
          </template>
        </vue-flip>
      

Simple Example (click)

        <vue-flip active-click="true" width="200px" height="50px">
          <template v-slot:front class="front">
            front
          </template>
          <template v-slot:back class="back">
            back
          </template>
        </vue-flip>
      

Simple Example (click & hover)

        <vue-flip active-click="" width="200px" height="50px">
          <template v-slot:front class="front">
            front
          </template>
          <template v-slot:back class="back">
            back
          </template>
        </vue-flip>
      

Horizontal Example

        <vue-flip active-click="" width="200px" height="50px" horizontal="true">
          <template v-slot:front class="front">
            front
          </template>
          <template v-slot:back class="back">
            <span>
              back
            </span>
          </template>
        </vue-flip>
      

Example with transition property

        <vue-flip :active-hover="true" width="200px" height="50px" transition="2s">
          <template v-slot:front class="front">
            front
          </template>
          <template v-slot:back class="back">
            back
          </template>
        </vue-flip>
      

Flip card programmatically

        <vue-flip :active-hover="true" width="200px" height="50px" class="simple-test" v-model="model">
          <template v-slot:front class="front">
            front
          </template>
          <template v-slot:back class="back">
            back
          </template>
        </vue-flip>
      

Flip one time

        <vue-flip v-model="model2" class="simple-test" width="20%" height="50px">
          <template v-slot:front class="front">
            <span style="display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;">disable me!</span>
          </template>
          <template v-slot:back class="back">
            back
          </template>
        </vue-flip>
      

        <code>
          export default {
            methods: {
              handleClick () {
                this.model2 = true
              }
            }
          }
        </code>