vuepress-theme-plume/docs/en/guide/api/client.md

title, icon, createTime, permalink

title	icon	createTime	permalink
Client	nimbus:browser	2025/10/08 21:58:48	/en/guide/api/client/

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.