@vuesence/book

v0.6.4

Published

a year ago

Vue.js 2 based documentation system component

Downloads

0High
0Medium
0Low

vuesence

vue book documentation documenting

Vuesence Book

Minimalistic Vue.js based documentation system component

VB-preview

How to use

Vuesence Book can be used as a Vue component in a Vue.js project or stand-alone in a browser

Node.js usage example

npm install @vuesence/book --save

<template>
  <div id="app" class="app">
    <vuesence-book 
      header-title="My Book" 
      :use-router="false"
    />
  </div>
</template>

<script>
import VuesenceBook from "@vuesence/book";

export default {
  name: "App",
  components: {
    VuesenceBook
  }
};
</script>

<style>
    @import './css/default.css';
    /* @import './css/vuepress-style.css'; */
    /* @import './css/google-style.css'; */
</style>

Browser usage example

The Vuesence Book can be run as a stand-alone web component in the browser. Vue and @vuesence/book packages should be loaded as scripts. Vue-router must be disabled.

<!DOCTYPE html>
<html lang="en">

	<head>
		<title>Vuesence Book demo</title>

		<script src="https://unpkg.com/vue"></script>
		<script src="https://unpkg.com/@vuesence/book"></script>

        <link rel="stylesheet" href="https://unpkg.com/@vuesence/book/src/css/default.css">      
		<!-- You can plug in any custom CSS here to style the Vuesence Book-->
		<!-- <link rel="stylesheet" href="css/vuepress-style.css"> -->
		<!-- <link rel="stylesheet" href="css/google-style.css"> -->
	</head>

	<body>
		<div id="app" class="app">
			<vuesence-book
				header-title="My Book"
				:use-router="false"
			/>
		</div>
	</body>

	<script>
		new Vue({ el: '#app' })
	</script>

</html>

Features

Simple, responsive, lightweight, fast
Easily and fully customizable with CSS
Very suitable for embedding help/documentation content into the website
Easy to use content management
Focus on performance - articles can be preloaded
Unlimited nesting levels for TOC tree menu
In general no dependencies (optional marked or other MD library for markdown support and vue-router for routing)

Documentation

Detailed documentation can be found here - https://vuesence.github.io/vuesence-book/

Content management

Unlike many other documentation systems Vuesence Book is not a static site generator. You can change the content without rebuilding the entire website.

vbcfg.json configuration file defines the content tree (TOC in the left column). It also contains links to articles in HTML or Markdown formats or the content of the article itself in an HTML format

└── vb
    ├── pages
    │   ├── intro.md
    │   ├── desc.md
    │   └── rich-content.html
    ├── vbcfg.json
    └── index.html

Self-explaining example of the vbcfg.json and articles of the documentation can be found here - https://github.com/vuesence/vuesence-book/tree/master/docs

Playground

Try it on codesandbox.io (Node.js version)

! The version on codesandbox.io might be slightly out of date

sbio

Check out my other Vue.js components

Sliding header - Vue.js component representing sliding header (or two different headers)
Cloud Sync Button - a button with cloud synchronization animation
Modal Window - simple lightweight Modal Window Vue.js component

Troubleshooting

Any bugs, issues, feature and pull requests are welcome

Please use GitHub's issue reporter or send me an email

Contribution

Contribution is always welcome and recommended. Here is how:

Fork the repository
Clone to your machine
Make your changes
Create a pull request

Areas for improvements / involvement

More convenient fenced code block highlighting
Full-text search
CSS layout improvement (responsiveness)
Themes
Top nav bar
Footer for stand-alone version
CEO issue

Change Log

0.4.2 small fixes on menu
0.4.50 release

License

@vuesence/book package is freely distributable under the terms of the MIT license.