cant use flipbook in vue project

i am trying to use flipbook in my vue js project. i saw their documentation. has anybody used it before.? if you do then please show me an example. here is my code below of what i had tired so far.
this is my test.vue file

<template>
  <flipbook :pages="pages" v-slot="flipbook">
     <button @click="flipbook.flipLeft">Previous Page</button>
     <button @click="flipbook.flipRight">Next Page</button>
  </flipbook>
</template>

the scirp file

   import Flipbook from 'flipbook-vue'
   import flipbook from "@/components/flipbook";

   export default {
       name: "RwvSettings",
       pages: [
           null,
           'images/1.jpg',
           'images/2.jpg',
           'images/3.jpg',
           'images/4.jpg'
           ],
      components: { flipbook },
  };

and this is the component

 <template>
    <div slot v-bind="{
      page
        }" />
   </div>
 </template>

 <script>
    export default {
        name: "flipbook",
        props: {
        pages: {
           type: Array,
           required: true
        }
    }

 }

it shows nothing. please someone help me resolve this issue

There are several issues with the sample code you provided, please check below.

Your importing Flipbook and your component name is also flipbook. When used in the template, the component name is used as a lowercase tag. So there is a name clash as a result.

Another issue is defining the pages array. This should be a data property.

as below

export default {
      name: "RwvSettings",
      components: { flipbook },
      data() {
          return {
              pages: [
                null,
                'images/1.jpg',
                'images/2.jpg',
                'images/3.jpg',
                'images/4.jpg'
              ]
          }
      }
  };

check a working sample at the below codepen

https://codepen.io/mazengh/pen/VwLEPdx

1 Like

yeah i was able to do that anyway. But i found a problem which occured in your example, and mine which i had implemented in nuxt js too …that is its not responsive. You try to stretch te screen wide and the image keeps moving, it doesnt stay at center. any idea how it can be solved.? as the pages prop which is actually doing it, i dont know how to access its styling