Introduction to VuePress

VuePress is a minimalistic Vue-powered static site generator. It was created to support the documentation needs of Vue’s ecosystem, but it can be used for publishing anything. VuePress comes with a built-in Markdown parser that allows you to embed Vue components into your markdown files. Among its important features are:

• Built-in Markdown Extensions
• Powerful Theming System
• Easy Customization

Useful VuePress API Examples

1. Registering Components Globally

You can register Vue components globally in VuePress using the enhanceApp.js file.

 
 // .vuepress/enhanceApp.js
 import Vue from 'vue';
 import MyGlobalComponent from 'components/MyGlobalComponent.vue';

 export default ({ Vue, options, router, siteData }) => {
   Vue.component('MyGlobalComponent', MyGlobalComponent);
 };
 

2. Adding a Custom Layout

Create a custom layout in the layouts folder to override the default layout.

 
 // .vuepress/layouts/MyCustomLayout.vue
 
 

3. Creating a Sidebar

Configure the sidebar by updating the config.js file.

 
 // .vuepress/config.js
 module.exports = {
   themeConfig: {
     sidebar: [
       '/',
       '/about',
       '/contact'
     ]
   }
 };
 

4. Using Plugins

VuePress supports a variety of plugins. Here’s an example of using the back-to-top plugin.

 
 // .vuepress/config.js
 module.exports = {
   plugins: [
     '@vuepress/back-to-top'
   ]
 };
 

VuePress App Example

Below is a simple example of a VuePress app that includes globally registered components, a custom layout, and a sidebar configuration.

 
 // project structure
 // .vuepress/
 //   ├── components/
 //   │   └── MyGlobalComponent.vue
 //   ├── layouts/
 //   │   └── MyCustomLayout.vue
 //   ├── config.js
 //   └── enhanceApp.js
 // docs/
 //   ├── .vuepress/
 //   └── README.md
 
 // enhanceApp.js
 import Vue from 'vue';
 import MyGlobalComponent from 'components/MyGlobalComponent.vue';

 export default ({ Vue, options, router, siteData }) => {
   Vue.component('MyGlobalComponent', MyGlobalComponent);
 };

 // config.js
 module.exports = {
   themeConfig: {
     sidebar: [
       '/',
       '/about',
       '/contact'
     ]
   },
   plugins: [
     '@vuepress/back-to-top'
   ]
 };

 // MyCustomLayout.vue
 
 
 // MyGlobalComponent.vue
 
 
 // README.md
 # Welcome to My VuePress Site
 

Hash: 955252cee1a92915577742d1cc7fa879044e5a04d87562c6275836324baabcc2