vue-flip

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