an easy way to embed a ePub into your webapp
npm i vue-reader
pnpm add vue-reader
Vue 3
<template>
<div style="height: 100vh">
<vue-reader url="/files/啼笑因缘.epub" />
</div>
</template>
<script setup>
import { VueReader } from 'vue-reader'
</script>
Vue 2
<template>
<div style="height: 100vh">
<vue-reader url="/files/啼笑因缘.epub"> </vue-reader>
</div>
</template>
<script>
import { VueReader } from 'vue-reader'
export default {
components: { VueReader },
}
</script>
Name | Description | Type | Default |
---|---|---|---|
url | book url or arrayBuffer | string /ArrayBuffer |
— |
title | the title of the book | string |
— |
showToc | whether to show the toc | boolean |
true |
Name | Description |
---|---|
title | You have access to title by slot |
Name | Description | Type | Default |
---|---|---|---|
url | the path or arrayBuffer of the book | string /ArrayBuffer |
— |
location | set / update location of the epub | string /number |
— |
tocChanged | when the reader has parsed the book you will receive an array of the chapters | function(toc) |
— |
epubInitOptions | pass custom properties to the epub init function, see epub.js | object |
— |
epubOptions | pass custom properties to the epub rendition, see epub.js's book.renderTo function | object |
— |
getRendition | when epubjs has rendered the epub-file you can get access to the epubjs-rendition object here | function(rendition) |
— |
Name | Description | type |
---|---|---|
update:location | a function that receives the current location while user is reading. This function is called everytime the page changes, and also when it first renders. | function(location) |
select | when select text | function(cfirange,contents) |
keyPress | when press the key | function(keyboardEvent) |
Name | Description |
---|---|
loadingView | epub view loadingView |
Name | Description | Type |
---|---|---|
nextPage | display next page | function |
prevPage | display previous page | function |
setLocation | Set the page | function(href) |