Plugins

Introduction

Plugins generally add global-level functionality to VuePress.

The architecture of the whole plugin system is as follows:

Using a plugin

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

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

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"],
};

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

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

Same with:

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

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

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

Shorthand:

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

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 */
      },
    ],
  ],
};

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 */
    },
  },
};

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.
  ],
};

• Object style

module.exports = {
  plugins: {
    xxx: false, // disabled.
  },
};

Official Plugins

• active-header-links (opens new window): A plugin of automatically activating sidebar links when page scrolls
• back-to-top (opens new window): Add the Back-to-top button
• google-analytics (opens new window): Add Google analytics
• last-updated (opens new window): Update last edit time
• medium-zoom (opens new window): Picture Zoom
• nprogress (opens new window): A progress bar plugin based on nprogress
• PWA (opens new window): Surport for Progressive Web App
• register-component (opens new window): register components
• search (opens new window): Headers-based search plugin

Tips

More configuration, please viewVuePress Plugins (opens new window)

Community Plugins

• clean-urls (opens new window): Use clean URLs in VuePress
• container (opens new window): Use Markdown containers in VuePress
• copyright (opens new window): 在 VuePress 中处理复制行为
• dehydrate (opens new window): Dehydrate HTML files in VuePress
• git-log (opens new window): Integrate git logs into VuePress
• mathjax (opens new window): Use TeX syntax in VuePress
• migrate (opens new window): Migrate another site to VuePress
• named-chunks (opens new window): Generate named chunks in VuePress
• redirect (opens new window): Handle redirections in VuePress
• serve (opens new window): Serve generated files in VuePress
• zooming (opens new window): Make images zoomable in VuePress (with zooming)

Tips

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