an easy way to embed a ePub into your webapp
From v1.3.x, vue-reader no longer supports Vue 2. Please use v1.2.x for Vue 2 support.
npm i vue-reader
pnpm add vue-readerVue 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 |
| errorView | epub view errorView |
| Name | Description | Type |
|---|---|---|
| nextPage | display next page | function |
| prevPage | display previous page | function |
| setLocation | Set the page | function(href) |