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

    • Architecture
    • Writing a Plugin
    • Writing a Theme
  • Cookbook

    • Introduction
    • Usage of Client Config
    • Adding Extra Pages
    • Making a Theme Extendable
    • Passing Data to Client Code
    • Markdown and Vue SFC
    • Resolving Routes

Architecture

Overview

vuepress-architecture-overview

The above figure shows a brief overview of the VuePress architecture:

  • Node App will generate temp files, including the pages, routes, etc.
  • Bundler will handle Client App together with the temp files, just like a common Vue app.

As a developer, you must be aware of that VuePress has two main parts: Node App and Client App, which is important when developing plugins and themes:

  • The entry file of a plugin or a theme will be loaded in Node App.
  • Client files will be loaded in Client App, which will be handled by bundler. For example, components, client config files, etc.

Core Process and Hooks

vuepress-core-process

The above figure shows the core process of VuePress Node App and the hooks of Plugin API:

  • In the init stage:
    • Theme and plugins will be loaded. That means all the plugins should be used before initialization.
    • As we are using markdown-it to parse the markdown file, so we need to create markdown-it instance before loading pages:
      • extendsMarkdownOptions hook will be processed to create markdown-it instance.
      • extendsMarkdown hook will be processed extends markdown-it instance.
    • Page files will be loaded:
      • extendsPageOptions hook will be processed to create pages.
      • extendsPage hook will be processed to extends page object.
  • In the prepare stage:
    • Temp files will be generated, so all hooks related to client files will be processed here.
  • In the dev / build stage:
    • Bundler will be resolved:
      • extendsBundlerOptions hook will be processed to create bundler configuration.
      • alias hook and define hook would be used in bundler configuration, so they will be processed here.
Edit this page on GitHub
Last Updated:: 2/5/24, 5:23 AM
Contributors: meteorlxy, Mr.Hope, Xinyu Liu
Next
Writing a Plugin