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
  • Guide

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

Plugin

With the help of Plugin API, VuePress plugin can provide different features for you.

Official Plugin

VuePress team provides some official plugins.

You need to import and use them in your config file via the plugins option. For example, use the @vuepress/plugin-google-analytics to integrate Google Analytics:

import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'

export default {
  plugins: [
    googleAnalyticsPlugin({
      id: 'G-XXXXXXXXXX',
    }),
  ],
}

Tips

Most plugins can only be used once. If the same plugin is used multiple times, only the last one will take effect.

However, some plugins can be used multiple times (e.g. @vuepress/plugin-container), and you should check the documentation of the plugin itself for detailed guide.

Community Plugin

Community users have created lots of plugins and published them to NPM. You should check the plugin's own documentation for detailed guide.

You can explore more plugins in VuePress Marketplace.

Local Plugin

If you want to use your own plugin but don't want to publish it, you can create a local plugin.

It is recommended to use the Config File directly as a plugin, because almost all of the Plugin APIs are available, which would be more convenient in most cases.

But if you have too many things to do in your config file, you can consider to extract them into separate plugins, and use them in your config file:

import myPlugin from './path/to/my-plugin.js'

export default {
  plugins: [myPlugin()],
}

You can refer to Advanced > Writing a Plugin for how to write your own plugin.

Edit this page on GitHub
Last Updated:: 9/12/24, 2:31 PM
Contributors: meteorlxy, Mr.Hope, Xinyu Liu, Abbas mkhzomi
Prev
Theme
Next
Bundler