Writing a Plugin

Tips

Before reading this guide, you'd better learn the VuePress architecture first.

Create a Plugin

A plugin should be a plain JavaScript object that satisfies the Plugin API, which is called a Plugin Object:

const fooPlugin = {
  name: 'vuepress-plugin-foo',
  // ...
}

A plugin could also be a function that receives the app instance as the param and returns a Plugin Object, which is called a Plugin Function:

const barPlugin = (app) => ({
  name: 'vuepress-plugin-bar',
  // ...
})

A plugin usually needs to allow user options, so we typically provide users with a function to receive options, and returns a Plugin Object or a Plugin Function. Then your plugin should be converted like this:

const fooPlugin = (options) => ({
  name: 'vuepress-plugin-foo',
  // ...
})

const barPlugin = (options) => (app) => ({
  name: 'vuepress-plugin-bar',
  // ...
})

Publish to NPM

After creating a plugin, you should follow some conventions in the package.json file before publishing it to NPM:

{
  "name": "vuepress-plugin-foo",
  "keywords": ["vuepress-plugin"]
}

• Set name to follow the naming convention, i.e. vuepress-plugin-xxx or @org/vuepress-plugin-xxx, which should be consistent with the name field of the Plugin Object.
• Set keywords to include vuepress-plugin, so that users can search your plugin on NPM.