Writing a Plugin

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

    A VuePress plugin is a plain JavaScript object that satisfies the , which is called a Plugin Object.

    • Plugin Object
    • Plugin Function
    2.   return {
    3.     name: 'vuepress-plugin-foo',
    4.   }
    5. }

    Publish to NPM

    The typical structure of a plugin package is as follow:

    The lib/index.js file is the plugin entry, which should export the plugin directly:

    • CJS
    • ESM
    1. module.export = fooPlugin

    Notice that the plugin entry will be loaded in Node, so it should be in CommonJS format.

    If you are using ESM format, you’ll need to use or typescriptWriting a Plugin - 图2open in new window to transpile it into CommonJS.

    package.json

    1. {
    3.   "version": "1.0.0",
    4.   "keywords": [
    5.   ],
    6.   "main": "lib/index.js",
    7.   "files": [
    8.     "lib"
    9.   ]
    • Set name to follow the naming convention: vuepress-plugin-xxx or @org/vuepress-plugin-xxx.
    • Set keywords to include vuepress-plugin, so that users can search your plugin on NPM.
    • Set main to the plugin entry file.