Plugins

Mr.Hope ... Basic
  • Vuepress
About 2 min

# Introduction

Plugins generally add global-level functionality to VuePress.

The architecture of the whole plugin system is as follows:

Plugin system architecture

# Using a plugin

You can use plugins by doing some configuration at .vuepress/config.js:

module.exports = {
  plugins: [require("./my-plugin.js")],
};
1
2
3

# Use plugins from a dependency

A plugin can be published on npm in CommonJS format as vuepress-plugin-xxx. You can use it:

module.exports = {
  plugins: ["vuepress-plugin-xx"],
};
1
2
3

If you prefix the plugin with vuepress-plugin-, you can use a shorthand to leave out that prefix:

module.exports = {
  plugins: ["xxx"],
};
1
2
3

Same with:

module.exports = {
  plugins: ["vuepress-plugin-xxx"],
};
1
2
3

This also works with Scoped Packages (opens new window):

module.exports = {
  plugins: ["@org/vuepress-plugin-xxx", "@vuepress/plugin-xxx"],
};
1
2
3

Shorthand:

module.exports = {
  plugins: ["@org/xxx", "@vuepress/xxx"],
};
1
2
3

Note

The plugin whose name starts with @vuepress/plugin- is an officially maintained plugin.

# Plugin options

Config it by pugins in config.js.

# Babel Style

Plugins can have options specified by wrapping the name and an options object in an array inside your config:

module.exports = {
  plugins: [
    [
      "vuepress-plugin-xxx",
      {
        /* options */
      },
    ],
  ],
};
1
2
3
4
5
6
7
8
9
10

Since this style is consistent with babel’s Plugin/Preset Options (opens new window), we call it Babel Style.

# Object Style

VuePress also provides a simpler way to use plugins from a dependency:

module.exports = {
  plugins: {
    xxx: {
      /* options */
    },
  },
};
1
2
3
4
5
6
7

Note

Prefer Babel Style first, because some plugins can have muti instance.

Tips

The plugin can be disabled when false is explicitly passed as option.

  • Babel style
module.exports = {
  plugins: [
    ["xxx", false], // disabled.
  ],
};
1
2
3
4
5
  • Object style
module.exports = {
  plugins: {
    xxx: false, // disabled.
  },
};
1
2
3
4
5

# Official Plugins

Tips

More configuration, please viewVuePress Plugins (opens new window)

# Community Plugins

Tips

For more information, please visit VuePress Community (opens new window)

Last update: November 26, 2020 09:05