Vue Reader - an easy way to embed a ePub into your webapp

An vue-reader for vue powered by EpubJS

Basic usage

npm install vue-reader --save

And in your vue-component...

Vue 3

Vue 2

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

export default {
  components: { VueReader }
}
</script>

Different Builds

Module	Filename
UMD(for browsers)	vue-reader.global-full.js
CommonJS	vue-reader.cjs.js
ES Module(for bundlers)	vue-reader.es.js

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
backgroundColor	backgroundColor of reader	string	#fff

VueReader Events

Name	Description	Type
progress	book url request progress	function(percentage)

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

EpubView Exposes

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

Recipes and tips

Save and retrieve progress from storage

Saving the current page on storage is pretty simple, but we need to keep in mind that locationChanged also gets called on the very first render of our app.

Vue 2

<template>
  <div style='height: 100vh'>
    <vue-reader url="/files/啼笑因缘.epub" :location='location' @update:location='locationChange'> </vue-reader>
  </div>
</template>
<script>
import { VueReader } from 'vue-reader'
export default {
  components: { VueReader },
  data() {
    return {
      location: null,
      firstRenderDone: false
    }
  },
  methods: {
    locationChange(epubcifi) {
      if (!this.firstRenderDone) {
        this.location = localStorage.getItem('book-progress')
        return this.firstRenderDone = true
      }
      localStorage.setItem('book-progress', epubcifi)
      this.location = epubcifi
    }
  }
}
</script>

Display page number for current chapter

We store the epubjs rendition in a ref, and get the page numbers in the callback when location is changed. Note that in this example we also find them name of the current chapter from the toc. Also see limitation for pagination for the whole book.

Change font-size

Hooking into epubJS rendition object is the key for this also.

Add / adjust custom css for the epub-html

EpubJS render the epub-file inside a iframe so you will need to create a custom theme and apply it.
This is useful for when you want to set custom font families, custom background and text colors, and everything CSS related.

Hightlight selection in epub

This shows how to hook into epubJS annotations object and let the user highlight selection and store this in a list where user can go to a selection or delete it.

Handling missing mime-types on server

EpubJS will try to parse the epub-file you pass to it, but if the server send wrong mine-types or the file does not contain .epub you can use the epubInitOptions prop to force reading it right.

<template>
  <div style="height: 100vh">
    <vue-reader url="/my-epub-service" :epubInitOptions="{ openAs: 'epub' }">
    </vue-reader>
  </div>
</template>
<script setup>
import { VueReader } from 'vue-reader'
</script>

Smooth Scroll

Sets css-property for epub-js manager to scroll-behavior: smooth

Display a scrolled epub-view

Pass options for this into epubJS in the prop epubOptions

Enable opening links / running scripts inside epubjs iframe

Epubjs is rendering the epub-content inside and iframe which defaults to sandbox="allow-same-origin", to enable opening links or running javascript in an epub, you will need to pass some extra params in the epubOptions prop.

<vue-reader
  url='/files/啼笑因缘.epub' 
  :epubOptions='{
    allowPopups: true, // Adds `allow-popups` to sandbox-attribute
    allowScriptedContent: true, // Adds `allow-scripts` to sandbox-attribute
  }'
/>

Speak the text

Get book information

Import file

Current progress

lightbox

Search in the book

Disable context menu

Custom font