Dependency Environment

• Node.js v20.6.0+
• npm 8+ or pnpm 8+ or Yarn 2+

How to install the dependency environment?

1. Please go to the Node.js Official Website to download the latest stable version

   Follow the instructions to complete the installation. Generally, you only need to keep the default settings and choose Next during the installation process.

2. Install PNPM

   After you have installed node.js, please open the terminal and run the following command:

   corepack enable

   The theme recommends using pnpm as the project manager.

3. Done

Command Line Installation

The theme provides a command line tool to help you build a basic project. You can run the following command to start the installation wizard.

pnpm

pnpm create vuepress-theme-plume@latest

yarn

yarn create vuepress-theme-plume@latest

npm

npm create vuepress-theme-plume@latest

After starting the wizard, you only need to answer a few simple questions:

┌  Welcome to VuePress and vuepress-theme-plume !
│
◇  Select a language to display / 选择显示语言
│  Simplified Chinese
│
◇  Where do you want to initialize VuePress? 
│  ./my-project
│
◇  Site name: 
│  My Vuepress Site
│
◇  Site description: 
│  My Vuepress Site Description
│
◇  Use multiple languages? 
│  No
│
◇  Select the default language for the site 
│  Simplified Chinese
│
◇  Use TypeScript? 
│  Yes
│
◇  Select the bundler tool 
│  Vite
│
◇  Deployment method: 
│  Custom
│
◇  Initialize git repository? 
│  Yes
│
◇  Install dependencies? 
│  Yes
│
◇   🎉  Creation successful! 
│
└  🔨  Start with the following commands:
      cd ./my-project
      pnpm run docs:dev

How to use the command line tool?

Taking the Windows system as an example, you can use the following methods to start the CMD command line tool:

1. Press the Win + R keys to open the "Run" dialog.
2. Enter cmd and press the Enter key. (You can also enter powershell to open PowerShell)

Note that cmd may not be in the directory you expect. You can use the following command to switch to the correct directory:

D: # This command switches to the D: drive, enter other drives according to the actual situation
cd open-source # Enter the open-source directory under D:

Now, you can create a basic project by entering pnpm create vuepress-theme-plume@latest here.

The created project will be located in the D:\open-source\my-project directory.

Manual Installation

Note

• When using pnpm, you need to install vue as a peer-dependency.
• When using Yarn 2+, you need to set nodeLinker: 'node-modules' in the .yarnrc.yml file.

To use this theme, you need to first create a new project and install vuepress@next and this theme.

• Create a new folder and enter the directory

  mkdir my-blog
  cd my-blog

• Initialize the project

  pnpm

  git init
  pnpm init

  yarn

  git init
  yarn init

  npm

  git init
  npm init

• Install related dependencies

  Install vuepress@next and vuepress-theme-plume as local dependencies.

  pnpm

  # Install vuepress
  pnpm add -D vuepress@next vue
  # Install theme and bundler
  pnpm add -D vuepress-theme-plume @vuepress/bundler-vite@next

  yarn

  # Install vuepress
  yarn add -D vuepress@next vue
  # Install theme and bundler
  yarn add -D vuepress-theme-plume @vuepress/bundler-vite@next

  npm

  # Install vuepress
  npm i -D vuepress@next vue
  # Install theme and bundler
  npm i -D vuepress-theme-plume @vuepress/bundler-vite@next

  Warning

  The current version of the theme has been adapted to vuepress@2.0.0-rc.20. You should install this version of VuePress. Versions higher or lower than this may have potential compatibility issues.

• Add script in package.json

  package.json

  {
    "scripts": {
      "docs:dev": "vuepress dev docs",
      "docs:build": "vuepress build docs"
    }
  }

  vuepress defaults to placing the documentation source code in the docs directory.

• Add the default temporary and cache directories to the .gitignore file

  .gitignore

  node_modules
  .temp
  .cache

  sh

  echo 'node_modules' >> .gitignore
  echo '.temp' >> .gitignore
  echo '.cache' >> .gitignore

• Configure the theme in docs/.vuepress/config.{js,ts}

  docs/.vuepress/config.ts

  import { viteBundler } from '@vuepress/bundler-vite'
  import { defineUserConfig } from 'vuepress'
  import { plumeTheme } from 'vuepress-theme-plume'
  
  export default defineUserConfig({
    // Don't forget to set the default language
    lang: 'zh-CN',
    theme: plumeTheme({
      // more...
    }),
    bundler: viteBundler(),
  })

  Warning

  Whether or not you need to use multiple languages, you should configure the correct value for the lang option in VuePress. The theme needs to determine the language environment text based on the lang option.

• Create a new README.md file in the docs directory

  Declare the home page configuration.

  README.md

  ---
  home: true
  ---

• Start your documentation site on the local server

  pnpm

  pnpm docs:dev

  yarn

  yarn docs:dev

  npm

  npm run docs:dev

  Vuepress will start a hot-reload development server at http://localhost:8080. When you modify your Markdown files, the content in the browser will also update automatically.

• Done

Update the Theme

You can run the following command directly in your project to check for available updates:

pnpm

pnpm dlx vp-update

yarn

yarn dlx vp-update

npm

npx vp-update

Contributors

pengzhanbozhenghaoyang24

Changelog

3/29/25, 12:30 AM

View All Changelog

• 497fe-docs: fix markdown formatting and update snippet path in usage guideon 3/29/25
• 9f99a-docs: add en markdown doc (#538)on 3/27/25
• a4ac3-docs: add en-US docs (#514)on 3/9/25
• bf9ef-docs: update docson 9/1/24