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.
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:
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:
Could you point me in the right direction, probably missing something simple.