VuePressVuePress
  • Introduction
  • Getting Started
  • Configuration
  • Page
  • Markdown
  • Assets
  • I18n
  • Deployment
  • Theme
  • Plugin
  • Bundler
  • Migrating from v1
  • Troubleshooting
  • Core

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

    • Vite
    • Webpack
  • Ecosystem

    • Default Theme
    • Plugins
  • Advanced

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

    • Ecosystem
    • MarketPlace
    • Contributing Guide
  • Changelog
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • Introduction
  • Getting Started
  • Configuration
  • Page
  • Markdown
  • Assets
  • I18n
  • Deployment
  • Theme
  • Plugin
  • Bundler
  • Migrating from v1
  • Troubleshooting
  • Core

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

    • Vite
    • Webpack
  • Ecosystem

    • Default Theme
    • Plugins
  • Advanced

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

    • Ecosystem
    • MarketPlace
    • Contributing Guide
  • 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:: 8/31/24, 7:59 AM
Contributors: meteorlxy, Mr.Hope, Xinyu Liu
Prev
Architecture
Next
Writing a Theme