How to use with vue

[gjvengelen]

Hi,

I want to try to see if I can use your package on my website. But I'm struggling a bit to get it to work with Vue3. So I created a simple component:

template>
    <Pagesection>
        <div id="flipbookApp" class="bg-openpeople-grey min-h-screen"></div>
        <button id="flipbookNext">next</button>
        <button id="flipbookPrev">prev</button>
        <button id="flipbookZoom">zoom</button>
    </Pagesection>
</template>

<script setup>
import { init as flipbook } from 'flipbook-viewer';

const app = document.getElementById('flipbookApp')
const next = document.getElementById('flipbookNext')
const prev = document.getElementById('flipbookPrev')
const zoom = document.getElementById('flipbookZoom')


onMounted(async () => {
    flipbook("/fp.pdf", app, (err, viewer) => {
        if (err) console.error(err);

        console.log('Number of pages: ' + viewer.page_count);
        viewer.on('seen', n => console.log('page number: ' + n));

        next.onclick = () => viewer.flip_forward();
        prev.onclick = () => viewer.flip_back();
        zoom.onclick = () => viewer.zoom();
    });
})
</script>

And I' rendering it on the page with a client-only marker to prevent SSR, but everytime I try to load that component it returns an error:

ReferenceError: self is not defined
    at Object.<anonymous> (/Users/gerard/dev/openpeople-content/node_modules/flipbook-viewer/dist/flipbook-viewer.js:1:209)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:528:24)
    at async __instantiateModule__ (file:///Users/gerard/dev/openpeople-content/.nuxt/dist/server/server.mjs:25281:3)

Could you point me in the right direction, probably missing something simple.

[theproductiveprogrammer]

Hi - I haven't used Vue so I'm not 100% sure but perhaps it's trying to run on Node rather than the browser and unable to access some browser context? This is only a guess.