Learn about VuePress

Tram Ho

Hello everyone, today in the hot weather of the hot summer, I have surfed through a tool that helps us create a static website of vue- that’s VuePress. If you pay attention, VuePress is a tool to help write on Vue ‘s doc page. Let’s go find it together.

What are static sites?

  • Is a website that serves to store information.
  • There is no client-server interaction except to embed a third party into the website.
  • It has fast speed and no server, so it reduces and reduces the possibility of security holes
  • Can contain HTML files, Mardown, .vue files so the ability to load web pages is very light and fast. It can help SEO significantly.

What is VuePress?

A “static site generator”, built and developed based on the Vue Framework. The first version appeared in early April and the current version is “0.14.1”.

Created by 2 parts: “minimalistic static site generator” and “default theme”.

Why use VuePress?

  • VuePress will parse the markdown files which are structured into HTML files when building. Therefore, page load speed is very fast.
  • With each created markdown file will be parse like the Vue template, we can use VueDevTool to check. Can use components to transfer into the markdown file
  • VuePress SEO friendly, has a built-in search system – search by heading and subheading index.

How VuePress works

  • A VuePress page is actually a SPA, also built on Vue Vue Router and webpack
  • During the build process, we create a server-rendered version of the app and render the corresponding HTML when we access the corresponding route. This approach is inspired by Nuxt
  • For each markdown the file is compiled into HTML with markdown-it and then processed like the Vue component template. This allows you to use Vue directly inside the markdown files and it’s great when we need to embed dynamic content.


You can refer to the installation as follows:

Directory structure

Default theme

Default page routing

If we want to configure it, we can write it in .vuepress/config.js file

Slidebar : There are many types of slidebar according to our configuration, but when using slidebar: ‘auto’, each page will automatically assign corresponding slidebar.

Search box : The default Search box of VuePress, if you do not want to use this built in we can set search: false. Also can search by Algolia.

Styling :

  • .vuepress / styles / palette.styl: this file we want to override the default theme colors in vuepress, in addition we can define some more colors that we use. Only define color variables without defining the style in this file.
  • .vuepress / styles / index.styl: add the styles we defined here to use http://stylus-lang.com/

Custom styles : We can override some styles in the default theme .vuepress / override.styl

i18n : in addition, VuePress also has i18n function which helps us easily change translations. It is necessary that we create folders that correspond to the prefix

Some of the benefits of using VuePress

Use Mardown to write content

Use Component in Mardown file

Use YAMP Front-matter in Markdown file

Support i18n easily

Support search in the default theme


Through a few of my share above hope to provide you with some things that you may need when working. Thank you for reading my shared article.



Share the news now

Source : Viblo