Introduction

an easy way to embed a ePub into your webapp

Installation

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-reader

Basic Usage

<template>
  <div style="height: 100vh">
    <vue-reader url="/files/啼笑因缘.epub" />
  </div>
</template>
<script setup>
import { VueReader } from 'vue-reader'
</script>

<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>

VueReader Attributes

| 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 |

VueReader Slots

| Name | Description | | -------- | ----------------------------------------------------------------------------------- | | title | You have access to title by slot |

VueReader props passed to inner EpubView

EpubView Attributes

| 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) | — |

EpubView Events

| 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) |

EpubView Slots

| Name | Description | | ----------- | --------------------- | | loadingView | epub view loadingView | | errorView | epub view errorView |

EpubView Exposes

| Name | Description | Type | | ----------- | --------------------- | ---------------- | | nextPage | display next page | function | | prevPage | display previous page | function | | setLocation | Set the page | function(href) |

Related

• react-reader

Star History