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

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:

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)
  },
}