Using a Plugin

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

  1. module.exports = {
  2. plugins: [
  3. require('./my-plugin.js')
  4. ]
  5. }

Use plugins from a dependency

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

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

Plugin Shorthand

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

  1. module.exports = {
  2. plugins: [ 'xxx' ]
  3. }

Same with:

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

This also works with Scoped PackagesUsing a Plugin - 图1:

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

Shorthand:

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

Note

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

Plugin options

Babel Style

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

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

Since this style is consistent with babel’s Plugin/Preset OptionsUsing a Plugin - 图2, we call it Babel Style.

Object Style

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

  1. module.exports = {
  2. plugins: {
  3. 'xxx': { /* options */ }
  4. }
  5. }

Note

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

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