Install

npm install vue-turnjs

Then in your main.js file add this

import { FlippingWidgets } from "vue-turnjs";
import "vue-turnjs/dist/vue-turnjs.esm.css";
Vue.use(FlippingWidgets);

Or you can import plugins one by one

import { TurnPlugin } from "vue-turnjs";
import "vue-turnjs/dist/vue-turnjs.esm.css";
Vue.use(TurnPlugin);
import { BookblockPlugin } from "vue-turnjs";
import "vue-turnjs/dist/vue-turnjs.esm.css";
Vue.use(BookblockPlugin);
import { Bookblock2Plugin } from "vue-turnjs";
import "vue-turnjs/dist/vue-turnjs.esm.css";
Vue.use(Bookblock2Plugin);
import { BookPlugin } from "vue-turnjs";
import "vue-turnjs/dist/vue-turnjs.esm.css";
Vue.use(BookPlugin);

You can even import single components in your Vue component

<template>
  <fw-turn></fw-turn>
</template>

<script>
import { FwTurn } from "vue-turnjs";

export default {
  components: { FwTurn }
}
</script>
<template>
  <fw-bookblock></fw-bookblock>
</template>

<script>
import { FwBookblock } from "vue-turnjs";

export default {
  components: { FwBookblock }
}
</script>
<template>
  <fw-bookblock2></fw-bookblock2>
</template>

<script>
import { FwBookblock2 } from "vue-turnjs";

export default {
  components: { FwBookblock2 }
}
</script>
<template>
  <fw-book></fw-book>
</template>

<script>
import { FwBook } from "vue-turnjs";

export default {
  components: { FwBook }
}
</script>

Last updated