No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


This repository contains theme for Vuepress, made specifically for creating live ebooks, like this one with ease:

It's compatible with vuepress 0.x.


  1. Create new vuepress project.

  2. Install theme:

yarn add vuepress-theme-live-ebook
  1. Install required peer dependencies:
yarn add vue-svg-loader
  1. Create config .vuepress/config.js, here's the example one:
// .vuepress/config.js
module.exports = {
  title: 'Design Process by Netguru', // Page title
  description: 'Live E-Book with useful informations about Design Process',
  theme: 'live-ebook', // Important! This is the name of this theme
  base: '/', // Base URL, leave as is if you don't serve the book from a folder
  head: [
    ['link', { rel: 'icon', href: '/images/favicon.ico' }],
    ['meta', { property: 'og:type', content: 'website' }],
  ga: 'UA-259047-66', // Google Analytics ID
  themeConfig: {
    bookTitle: 'Design Process for pros', // Book title
    baseUrl: '', // Used for sharing in social media and for meta tags
    exitUrl: '',
    company: {
      name: 'Netguru',
      url: '',
      logo: '/images/netguru.svg'
    twitter: 'netguru',

  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');


  1. Create file with the following content:
layout: home

Alternatively you can also fork one of our E-Books, e.g. PM Book and tweak it to your liking.

Example e-book file tree:

├── .vuepress
│   ├── public <-- publically available files
│   │   ├── fonts
│   │   └── images
│   ├── config.js <-- configuration file, example content posted above
│   ├── override.styl  <-- use this to override default stylus variables
│   └── style.styl <-- put your own CSS here
├── chapters <-- actual e-book content here
│   ├──
│   ├──
│   └──
├── <-- home page (required, although it's there only to redirect users to 1st chapter) 
└── package.json

Chapter format

Each chapter file has to start with the following Front Matter:

layout: chapter
title: "Example title of Chapter 2"
chapter_number: "02"
description: In this chapter you will ...

# Example title of Chapter 2

Chapter content goes here.
  • Fields: layout, title and chapter_number are required.
  • description field is optional, if present - it will be places in proper meta tags on the page. Defaults to the description from .vuepress/config.js
  • Make sure that title in front matter corresponds to the primary heading - as in the above example.
  • Use only one H1 heading (# ...).

See example chapter for reference.

Available components


If you need to use an image, place it in folder .vuepress/public/images. You can then use it using the <BaseImage /> component, e.g.:

<BaseImage img="sample.png" img2x="sample@2x.png" alt="Sample image" />

The img2x property is optional. If you want you can also use regular markdown image syntax.


You can insert quotes by using following syntax:

  text="Quote text goes here"
  author="Quote author goes here"

This will produce a following quote: BaseQuote


You can insert Q&A sections by using following syntax:

  question="Why do you want to know the business model?"
  answer="This will allow us some amount of lorem ipsum dolor sit amet conscetur blah blah"

This will produce a following outcome: BaseQA


You can insert DOs and DONT's sections by using following syntax:

  intro="There are a couple of things we need to cover:"
    'Create your wireframes based on a muted color pallete',
    'Use color only if it helps defining the idea behind the design',
    'Don't use color in your wireframe designs unless it has a solid purpose',
    'Don't use various tints of grey',

This will produce a following outcome: BaseComparison


In order to customize basic informations, update themeConfig properties in .vuepress/config.js.

You can also override [styles/variables.stylus](default stylus variables), in order to do so create .vuepress/override.styl and override them there. Recommended variables to override:

$ff-base = Helvetica
$ff-serif = Georgia, sans-serif
$c-primary = #ff9a57

Do NOT put regular CSS inside override.styl - it's only for overriding variables.

If you want to add custom CSS, create .vuepress/style.styl.