Client API

Client API is provided by @vuepress/clientopen in new window package, which is used for developing client files.

Composition API

useSiteData

• Details:

  Returns the site data ref object.

useSiteLocaleData

• Details:

  Returns the site data ref object of current locale.

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

useRouteLocale

• Details:

  Returns the locale path ref object of current route.

  The value is one of the keys of the locales config.

usePageData

• Details:

  Returns the page data ref object of current page.

usePageFrontmatter

• Details:

  Returns the frontmatter ref object of current page.

  The value is the frontmatter property of the page data.

usePageHead

• Details:

  Returns the head config ref object of current page.

  The value is obtained by merging and deduplicating head frontmatter and head config.

usePageHeadTitle

• Details:

  Returns the head title ref object of current page.

  The value is obtained by joining the page title and site title.

usePageLang

• Details:

  Returns the language ref object of current page.

  The value is the lang property of the page data.

Utils

defineClientAppEnhance

• Details:

  Helper for creating clientAppEnhanceFiles.

• Example:

Create clientAppEnhance.ts file:

import { defineClientAppEnhance } from '@vuepress/client'

export default defineClientAppEnhance(({ app, router, siteData }) => {
  // ...
})

• Also see:
  • Cookbook > Usage of Client App Enhance

defineClientAppSetup

• Details:

  Helper for creating clientAppSetupFiles.

• Example:

Create clientAppSetup.ts file:

import { defineClientAppSetup } from '@vuepress/client'

export default defineClientAppSetup(() => {
  // ...
})

withBase

• Details:

  Prefix URL with site base.

• Also see:

  • Guide > Assets > Base Helper

Constants

There are some constants that available in the client side code.

To shim the types of these constants in client side code, add @vuepress/client/types to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["@vuepress/client/types"]
  }
}

VERSION

• Type: string

• Details:

  Version of VuePress core package.

DEV

• Type: boolean

• Details:

  An environment flag indicating whether it is currently running in dev mode.

SSR

• Type: boolean

• Details:

  An environment flag indicating whether it is currently running in server-side-rendering (SSR) build.