kgrandemange / vue-flip

A Vue.js component to flip elements.

vue-flip

A component to flip elements.

Demo

Here

Installation

Vue.js 2 :

npm i vue-flip@1.0.2

yarn add vue-flip@1.0.2

Vue.js 3 :

npm i vue-flip

yarn add vue-flip

Module

<template>
  <vue-flip></vue-flip>
</template>

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

Usage

Use this template:

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

You can active the flip on the click with:

<vue-flip active-click></vue-flip>

or you can active on the hover with:

<vue-flip active-hover></vue-flip>

or you can bind with a variable:

<vue-flip v-model="flipped"></vue-flip>

this.flipped = true; //or false -> to flip front/back

Properties

	Description	Type	Required	Default Value
active-click	flip on click	Boolean	false	false
active-hover	flip on hover	Boolean	false	false
height	component height	String	true
width	component with	String	true
transition	component transition	String	false	0.5s
v-model	bind flip with variable	Boolean	false
horizontal	switch to horizontal flip	Boolean	false	false