How to have a flipbook like turn.js in Nuxt?

Question

How to can import turn.js to nuxt.js project. When I use through plugin then error Window not define, even though I used it in client mode

• Update: I used required package check is client, but I get error jquery__WEBPACK_IMPORTED_MODULE_3___default(...)(...).turn is not a function

<template>
    <div id="flipbook">
        <div class="hard">
            Turn.js
        </div>
        <div class="hard" />
        <div> Page 1 </div>
        <div> Page 2 </div>
        <div> Page 3 </div>
        <div> Page 4 </div>
        <div class="hard" />
        <div class="hard" />
    </div>
</template>

<script>
    import $ from 'jquery';

    if (process.client) {
        require('turn.js');
    }

    export default {
        mounted() {
            console.log($('#flipbook').turn('page'));
            $('#flipbook'.turn({
                width: 400,
                height: 300,
                autoCenter: true,
            }));
        },

    };
</script>

Answer 1

EDIT + TLDR: use flipbook-vue because it is better on any point really (weight, maintenance, flexibility, doesn't rely on jQuery etc...).
This is also working perfectly fine with Nuxt as shown here.

---

If you need to install jQuery into your Nuxt project (which I do not recommend), you can follow my answer here. Still, an alternative without jQuery would be greatly appreciated IMO, even more if you're using it just for selecting an element in the DOM. Is it worth 20kb?

If you want to target a specific element available into your component, please use the $refs syntax, as explained in this other answer. And not a usual querySelector.

require is node-based, you should rather use import since you're in a modern browser based ecosystem when using Vue. Hence, import your package locally with a dynamic import is still the best way to go here.

TLDR: something like this is usually enough to make it work

<template>
  <div id="flipbook" ref="flipbook">
    <div class="hard">
      Turn.js
    </div>
    <div class="hard" />
    <div> Page 1 </div>
    <div> Page 2 </div>
    <div> Page 3 </div>
    <div> Page 4 </div>
    <div class="hard" />
    <div class="hard" />
  </div>
</template>

<script>
export default {
  async mounted () {
    if (process.client) {
      const turnJs = await import('turn.js')
      this.$refs.flipbook.turnJs.turn({
        width: 400,
        height: 300,
        autoCenter: true,
      })
    }
  }
}
</script>

Meanwhile, the project did not get any updates for already 10 years so I guess that you can pass on this one.

Writing your own with a bit of CSS + JS is also totally feasible and will provide the best results IMO.

---

Looking for a Nuxt3 solution?

Here you go.