VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • active-header-links
  • git
  • palette
  • reading-time
  • rtl
  • Sass Palette
    • Guide
    • Config
  • theme-data
  • toc

theme-data

@vuepress/plugin-theme-data

Provide client data for your theme, with VuePress i18n support.

This plugin is mainly used to develop themes, and has been integrated into the default theme. You won't need to use it directly in most cases.

For theme authors, this plugin will help you to use the same i18n mechanism as VuePress and the default theme. But if you don't want to provide i18n support, or you want to implement in your own way, you don't need this plugin.

Usage

npm i -D @vuepress/plugin-theme-data@next
.vuepress/config.ts
import { themeDataPlugin } from '@vuepress/plugin-theme-data'

export default {
  plugins: [
    themeDataPlugin({
      // options
    }),
  ],
}

Options

themeData

  • Type: ThemeData

  • Default: {}

  • Details:

    The theme data object that you want to use in client side.

    You can provide theme data in Node side via this option, and use it in client side via useThemeData and useThemeLocaleData.

  • Example:

.vuepress/config.ts
export default {
  plugins: [
    themeDataPlugin({
      themeData: {
        foo: 'foo',
        locales: {
          '/zh/': {
            foo: 'zh-foo',
          },
        },
      },
    }),
  ],
}

Warning

The theme data object will be processed by JSON.stringify() before forwarding to client side, so you should ensure that you are providing a JSON-friendly object.

Composition API

useThemeData

  • Details:

    Returns the theme data ref object.

    The value is provided by themeData option.

  • Example:

import type { ThemeData } from '@vuepress/plugin-theme-data/client'
import { useThemeData } from '@vuepress/plugin-theme-data/client'

type MyThemeData = ThemeData<{
  foo: string
}>

export default {
  setup(): void {
    const themeData = useThemeData<MyThemeData>()
    console.log(themeData.value)
  },
}

useThemeLocaleData

  • Details:

    Returns the theme data ref object in current locale.

    The properties of current locale has been merged into the root-level properties.

  • Example:

import type { ThemeData } from '@vuepress/plugin-theme-data/client'
import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'

type MyThemeData = ThemeData<{
  foo: string
}>

export default {
  setup(): void {
    const themeLocaleData = useThemeLocaleData<MyThemeData>()
    console.log(themeLocaleData.value)
  },
}
Edit this page on GitHub
Last Updated:: 4/12/25, 7:03 PM
Contributors: Mister-Hope, meteorlxy, pengzhanbo
Prev
Sass Palette
Next
toc