Overview

Doc collections are specifically designed for managing structured documentation, suitable for scenarios where articles have strong relationships and need to be presented as a cohesive whole. Typical applications include:

• API technical documentation
• Product usage tutorials
• Thematic development guides
• Knowledge system notes

This collection enables quick navigation and content organization between documents through an intelligent sidebar navigation system.

The theme supports configuring multiple independent doc collections

Creating a Doc Collection

Quickly create a documentation collection in three steps:

• Create a documentation directory

  docs

  guide

  intro.md

  install.md

  …

• Configure collection parameters

  .vuepress/config.ts

  import { 
  defineUserConfig
   } from 'vuepress'
  import { 
  plumeTheme
   } from 'vuepress-theme-plume'
  
  export default 
  defineUserConfig
  ({
    
  theme
  : 
  plumeTheme
  ({
      
  collections
  : [ 
        { 
  type
  : 'doc', 
  dir
  : 'guide', 
  title
  : 'Guide' }
      ]
    })
  })

  .vuepress/plume.config.ts

  import { 
  defineThemeConfig
   } from 'vuepress-theme-plume'
  
  export default 
  defineThemeConfig
  ({
    
  collections
  : [ 
      { 
  type
  : 'doc', 
  dir
  : 'guide', 
  title
  : 'Guide' }
    ]
  })

• Configuration Complete

Multi-language Support

Configure independent documentation collections for different language versions:

docs

guide

intro.md

install.md

…

en

guide

intro.md

install.md

…

.vuepress/config.ts

import { 
defineUserConfig
 } from 'vuepress'
import { 
plumeTheme
 } from 'vuepress-theme-plume'

export default 
defineUserConfig
({
  
theme
: 
plumeTheme
({
    
locales
: {
      '/': { 
        
collections
: [
          { 
type
: 'doc', 
dir
: 'guide', 
title
: 'Guide' }
        ]
      },
      '/en/': { 
        
collections
: [
          { 
type
: 'doc', 
dir
: 'guide', 
title
: 'Guide' }
        ]
      }
    }
  })
})

.vuepress/plume.config.ts

import { 
defineThemeConfig
 } from 'vuepress-theme-plume'

export default 
defineThemeConfig
({
  
locales
: {
    '/': { 
      
collections
: [
        { 
type
: 'doc', 
dir
: 'guide', 
title
: 'Guide' }
      ]
    },
    '/en/': { 
      
collections
: [
        { 
type
: 'doc', 
dir
: 'guide', 
title
: 'Guide' }
      ]
    }
  }
})

Directory Structure Configuration

The dir parameter defines the source file location for documents, supporting both relative and absolute paths:

dir: 'guide' // Points to docs/guide
dir: '/guide/' // Equivalent syntax
dir: './guide/' // Equivalent syntax
dir: '/team/guide/' // Points to docs/team/guide

In multi-language environments, paths are relative to the corresponding language directory

Auto Frontmatter Generation

Only takes effect after executing vuepress dev or vuepress build

Supports automatic generation of document metadata with customizable processing logic:

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    collections: [
      {
        type: 'doc',
        dir: 'guide',
        title: 'Guide',
        autoFrontmatter: {
          title: true, // Auto-generate title
          createTime: true, // Auto-generate creation time
          permalink: true, // Auto-generate permanent link
          transform: (data, context, locale) => { // Custom transformation
            data.foo ??= 'foo'
            return data
          }
        }
      }
    ]
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig } from 'vuepress-theme-plume'

export default defineThemeConfig({
  collections: [
    {
      type: 'doc',
      dir: 'guide',
      title: 'Guide',
      autoFrontmatter: {
        title: true, // Auto-generate title
        createTime: true, // Auto-generate creation time
        permalink: true, // Auto-generate permanent link
        transform: (data, context, locale) => { // Custom transformation
          data.foo ??= 'foo'
          return data
        }
      }
    }
  ]
})

Generation result:

docs/guide/install.md

---
title: install
createTime: 2025/03/24 20:15:12
permalink: /guide/a1b2c3d4/
---

Sidebar Configuration

Provides flexible sidebar navigation configuration options:

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    collections: [
      {
        type: 'doc',
        dir: 'guide',
        title: 'Guide',
        sidebar: [ // Manually configure navigation items
          'intro',
          'install',
        ],
        sidebarScrollbar: true, // Display sidebar scrollbar
      }
    ]
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig } from 'vuepress-theme-plume'

export default defineThemeConfig({
  collections: [
    {
      type: 'doc',
      dir: 'guide',
      title: 'Guide',
      sidebar: [ // Manually configure navigation items
        'intro',
        'install',
      ],
      sidebarScrollbar: true, // Display sidebar scrollbar
    }
  ]
})

Auto-generated Sidebar

Set sidebar: 'auto' to automatically generate navigation based on directory structure:

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    collections: [
      {
        type: 'doc',
        dir: 'guide',
        title: 'Guide',
        sidebar: 'auto', // Auto-generate navigation structure
        sidebarCollapsed: undefined, // Collapse state: true-collapsed false-expanded
      }
    ]
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig } from 'vuepress-theme-plume'

export default defineThemeConfig({
  collections: [
    {
      type: 'doc',
      dir: 'guide',
      title: 'Guide',
      sidebar: 'auto', // Auto-generate navigation structure
      sidebarCollapsed: undefined, // Collapse state: true-collapsed false-expanded
    }
  ]
})

Manual Sidebar Configuration

View detailed Sidebar configuration instructions

Collection Homepage Customization

The README.md file in the directory automatically serves as the collection homepage, supporting transformation into a feature-rich portal layout:

typescript/README.md

---
pageLayout: home
config:
  - type: hero
    title: TypeScript Complete Guide
    description: TypeScript learning path from basics to advanced
  - type: features
    features:
      - title: Type System
        details: Deep understanding of TypeScript's type system
        icon: mdi:code-braces
      - title: Advanced Features
        details: Master generics, decorators, and other advanced features
        icon: mdi:rocket-launch
---

Contributors

pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

• 38505-docs: update en docs (#708)on 10/9/25
• 4d236-feat(theme)!: add collections support (#704)on 10/7/25