Technology Blog

Look deep into latest news and innovations happening in the Tech industry with our highly informational blog.

VuePress: A Vue-powered Static Site Generator

VuePress is a minimalistic Vue-powered static site generator from Evan You, the creator of Vue.js. It was built to support the documentation needs of Vue’s projects. By default, the generated theme comes optimized for technical documentation.

VuePress sites are an SPA, and during a build, a server-rendered version gets created by visiting each route. VuePress is powered by Vue, Vue Router, and Webpack. You also can use Vue inside of your markdown!

VuePress: A Vue-powered Static Site Generator

Getting Started with VuePress

You can quickly add documentation to an existing project writing in Markdown format. The following example is from the getting started section of the guide and serves as an example of how quickly you can get started:

# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress

# create a docs directory
mkdir docs
# create a markdown file
echo '# Hello VuePress' > docs/

While you are writing content, the browser gets updated in real-time, which is extremely helpful while building documentation.


Vue components in .vuepress/components are automatically registered as global, async components that can be used directly in your markdown documentation.

Markdown files are first compiled to HTML and passed on as a Vue component to vue-loader, and you can use Vue interpolation and have access to site data:

{{ 5 + 5 }}

{{ $page }}

VuePress enables custom theming through Vue single file components. You can create a custom theme at .vuepress/themes/Layout.vue, and you can organize your theme however you want. You can use a custom theme from a dependency with the format of an NPM module vuepress-theme-xxx, in the following example that would be vuepress-theme-cobalt:

module.exports = {
  theme: 'cobalt'

You can use Markdown extensions including YAML front matter, emoji support, Github-style tables, and custom blocks:

::: danger STOP
Danger zone, do not proceed

Which might look something like the following with the default theme.


Pic courtesy:

For more Information and to build website using Laravel, Hire Laravel Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – or Skype us: “hkinfosoft“.

To develop custom website using Laravel, please visit our technology page.

Content Source: