VuePressVuePress
  • 2023最新建站教程②服务器购买与设置
  • Getting Started
  • Configuration
  • Page
  • Markdown
  • Assets
  • I18n
  • Deployment
  • Theme
  • Plugin
  • Bundler
  • Migrating from v1
  • Troubleshooting
  • Web

    • CLI
    • Config
    • Frontmatter
    • Built-in Components
    • Plugin API
    • Theme API
    • Client API
    • Node API
  • Bundlers

    • Vite
    • Webpack
  • Ecosystem

    • Default Theme
    • Plugins
  • 进阶

    • Architecture
    • Writing a Plugin
    • Writing a Theme
    • Cookbook
  • 学习交流

    • 讨论区
    • 来发信
  • Changelog
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 2023最新建站教程②服务器购买与设置
  • Getting Started
  • Configuration
  • Page
  • Markdown
  • Assets
  • I18n
  • Deployment
  • Theme
  • Plugin
  • Bundler
  • Migrating from v1
  • Troubleshooting
  • Web

    • CLI
    • Config
    • Frontmatter
    • Built-in Components
    • Plugin API
    • Theme API
    • Client API
    • Node API
  • Bundlers

    • Vite
    • Webpack
  • Ecosystem

    • Default Theme
    • Plugins
  • 进阶

    • Architecture
    • Writing a Plugin
    • Writing a Theme
    • Cookbook
  • 学习交流

    • 讨论区
    • 来发信
  • Changelog
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • Advanced

    • Architecture
    • Writing a Plugin
    • Writing a Theme
  • Cookbook

    • Introduction
    • Usage of Client Config
    • Adding Extra Pages
    • Making a Theme Extendable
    • Passing Data to Client Code
    • Markdown and Vue SFC
    • Resolving Routes

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.
Edit this page on GitHub
Last Updated:: 5/11/25, 5:41 AM
Contributors: xuzhi1225
Prev
Architecture
Next
Writing a Theme