Usage

import { Layout } from 'vuepress-theme-plume/client'

Layout Components

• <Layout />: Page layout component
• <NotFound />: 404 page layout component

import { Layout, NotFound } from 'vuepress-theme-plume/client'

Common Components

• <VPLink />: Link component
• <VPButton />: Button component
• <VPIcon />: Icon component
• <VPBadge />: Badge component
• <VPImage />: Image component
• <VPHomeBox />: Home page layout component

For more components, please check the source code.

import VPButton from 'vuepress-theme-plume/components/VPButton.vue'
import VPLink from 'vuepress-theme-plume/components/VPLink.vue'

Composable APIs

useDarkMode()

• Type: () => Ref<boolean>

• Details:

  Returns a reactive reference indicating whether dark mode is enabled.

import { useDarkMode } from 'vuepress-theme-plume/composables'

const isDark = useDarkMode()

// Switch to dark mode
isDark.value = true
// Switch to light mode
isDark.value = false

useData()

• Type: () => Data

• Details:

  Returns reactive data for various theme properties.

interface Data {
  // Theme configuration
  theme: ThemeLocaleDataRef<PlumeThemeLocaleData>
  // Current page data
  page: PageDataRef<PlumeThemePageData>
  // Current page frontmatter
  frontmatter: PageFrontmatterRef<Frontmatter<T>>
  // Current language
  lang: Ref<string>
  // Site data
  site: SiteLocaleDataRef
  // Whether dark mode is enabled
  isDark: Ref<boolean>
}

import { useData } from 'vuepress-theme-plume/composables'

const { site, page, frontmatter, isDark, lang } = useData()

// Current page title
console.log(frontmatter.value.title)

useLocalePostList()

• Type: () => Ref<PostItem[]>

• Details:

  Returns a reactive reference to the post list data.

interface PostItem {
  path: string
  title: string
  excerpt: string
  tags: string[]
  sticky: boolean
  categoryList: CategoryItem[]
  createTime: string
  lang: string
  encrypt?: boolean
}

interface CategoryItem {
  type: string | number
  name: string
}

import { useLocalePostList } from 'vuepress-theme-plume/composables'

const postList = useLocalePostList()

More

For other composable APIs, please check the source code.

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
• 0fd6c-refactor(theme): improve types and flat config (#524)on 3/15/25
• 6e6f9-docs: improve docs (#509)on 3/2/25
• 520dc-style: lint fixon 9/10/24
• b079a-docs: update docson 6/17/24
• 920d3-docs: update docson 3/13/24
• ca097-docs: lint fixon 3/8/24
• c56ba-feat: 全新的文档！on 3/8/24