Flip Elements In Vue.js 3/2

Install & Download:

# NPM
$ npm install vue-flip --save

Description:

A Vue.js 3/2 component that enables you to flip an element on your web app.

How to use it:

1. Import and register the VueFlip component.

import { VueFlip } from 'vue-flip';
export default {
  components: {
    'vue-flip': VueFlip
  }
}

2. Add front & back content to the flip component.

<vue-flip>
  <template v-slot:front>
    ...
  </template>
  <template v-slot:back>
    ...
  </template>
</vue-flip>

3. Available component props.

activeClick: {
  type: Boolean,
  required: false,
  default: false,
},
activeHover: {
  type: Boolean,
  required: false,
  default: false,
},
horizontal: {
  type: Boolean,
  required: false,
  default: false,
},
width: {
  type: String,
  required: true,
  validator: validateWidth,
},
height: {
  type: String,
  required: true,
  validator: validateHeight,
},
transition: {
  type: String,
  required: false,
  default: "0.5s",
  validator: validateTransitionDuration,
},
modelValue: {
  type: Boolean,
  required: false,
},