VuePress: Powerfull, static website generator with VueJs

VuePress: Powerfull, static website generator with VueJs

Apr 17, 2019 / Ramesh Mhetre

VuePress is a minimalistic Vue-powered static site generator from Evan You, the creator of Vue.js.

A VuePress site is infact a Vue powered Single Page Application(SPA) with VueRouter & webpack. If you've used Vue before, you will notice the familiar development experience when you are writing or developing custom themes (you can even use Vue DevTools to debug your custom theme!).

How VuePress works?

During build, VuePress create a server-rendered version of the app and render the corresponding HTML by virtually visiting each route. Each markdown file is compiled into HTML with markdown-it and then processed as the template of a Vue component. This allows you to directly use Vue inside your markdown files and is great when you need to embed dynamic content

Each page generated by VuePress has its own pre-rendered static HTML, providing great loading performance and is SEO-friendly. Once the page is loaded, however, Vue takes over the static content and turns it into a full Single-Page Application (SPA). Additional pages are fetched on demand as the user navigates around the site.

Features of VuePress

Start Using VuePress

You can install VuePress globally or locally within project. After installation you just have to build the project to read your changes.

yarn global add vuepress # OR npm install -g vuepress

# create a markdown file
echo '# Hello VuePress' > README.md

# start writing
vuepress dev

# build
vuepress build

Here is how beautiful the default theme looks like:

VuePress default theme

VuePress default theme

Some Alternatives to VuePress




Similar Articles

Compiling assets with Laravel Mix

Compiling assets with Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps
Read more...
Javascript Markdown parser: Markdown-it

Javascript Markdown parser: Markdown-it

Markdown-it is a javascript library/package which converts markdown text to HTML. Its very fast, efficient & easy to use within your project.
Read more...
A fancy VueJs time picker

A fancy VueJs time picker

Vuejs time picker with material design theme.
Read more...