Writing docs using Markdown and/or Vue component without build process

This is a new feature in [email protected] (beta version), you can get it by:

<script src="https://unpkg.com/docute@next"></script>

A short introduction to Docute:

It’s a JavaScript file that turns your markdown files into a docs website on the fly, built with Vue.js and marked

If you know Flatdoc you already know Docute, except that Docute supports multi-pages and has many more features.

(BTW, I knew flatdoc from André Staltz’s post after I made docute 😜)

⬅️ And this is how it looks like.

It does not look that special right? The design is clean & Make website without build process might be its core selling points. (It does has a plugin system in case you wonder.)

So here I’m going to introduce another feature, combine the power of Markdown & Vue component:

https://gist.github.com/egoist/f4f590a1e9d4a0afc2d62eae6db8789f

Basically the nav option is similar to routes in many router libraries, it defines how the user enters a page, by default it fetches markdown file matches by the path option, for example path: '/get-started' will fetch get-started.md for you, but you can also use markdown option to write inline markdown if your website isn’t that large.

The fetched content will be parsed by marked and rendered as simple HTML string. But if you use component option which is a simple Vue component object, the parsed HTML string will be used as the component’s template value, and we finally render the Vue component as a part of the app.

Wrap It Up

Docute is a documentation framework:

• writing docs without build process (i.e. make website fast!)
• a powerful plugin system
• a kind of clean and elegant design
• writing docs with markdown and Vue component opt-in

Related link:

• Docute’s website: https://docute.js.org
• Docute’s source code: https://github.com/egoist/docute
• How to run code blocks in Markdown: https://github.com/egoist/docute-iframe