usePageData 現在ページのデータ参照オブジェクトを返す
コンポーネント ファイルで、そのコンポーネントを呼び出している mdファイルのパスやタイトルなどを利用したい時など、props で渡さなくてもコンポーネント側で usePageData を使ってそれら記事データを取得できる
<script setup lang="ts">
import { usePageData } from '@vuepress/client'
import { PageData } from './type' // 型エイリアス (type alias)
// usePageData
const pageData: PageData = usePageData().value;
</script>
<template>
{{ pageData }}
</template>
表示結果 例 pageData
{ "key": "v-70e15a30", "path": "/articles/vuePress/client-API.html", "title": "VuePress Client API メソッド", "lang": "ja", "frontmatter": { "title": "VuePress Client API メソッド", "description": null, "date": "2022-04-25T00:00:00.000Z", "lastUpdatedAt": "2022-04-26T00:00:00.000Z", "image": "VuePress.webp", "tags": null }, "excerpt": "", "headers": [ { "level": 3, "title": "usePageData 現在ページのデータ参照オブジェクトを返す", "slug": "usepagedata-現在ページのデータ参照オブジェクトを返す", "children": [] }, { "level": 3, "title": "usePageFrontmatter 現在ページの frontmatterオブジェクトを返す", "slug": "usepagefrontmatter-現在ページの-frontmatterオブジェクトを返す", "children": [] }, { "level": 3, "title": "その他 Client API メソッド", "slug": "その他-client-api-メソッド", "children": [ { "level": 4, "title": "usePageHead: 現在ページの head config ref オブジェクトを返す", "slug": "usepagehead-現在ページの-head-config-ref-オブジェクトを返す", "children": [] }, { "level": 4, "title": "usePageHeadTitle: 現在ページの ヘッドタイトル参照オブジェクトを返す", "slug": "usepageheadtitle-現在ページの-ヘッドタイトル参照オブジェクトを返す", "children": [] }, { "level": 4, "title": "usePageLang: 現在ページの言語参照オブジェクトを返す", "slug": "usepagelang-現在ページの言語参照オブジェクトを返す", "children": [] }, { "level": 4, "title": "useRouteLocale: 現在のルートのロケールパス参照オブジェクトを返す", "slug": "useroutelocale-現在のルートのロケールパス参照オブジェクトを返す", "children": [] }, { "level": 4, "title": "useSiteData: サイトデータ参照オブジェクト を返す", "slug": "usesitedata-サイトデータ参照オブジェクト-を返す", "children": [] }, { "level": 4, "title": "useSiteLocaleData: 現在のロケールのサイトデータ参照オブジェクトを返す", "slug": "usesitelocaledata-現在のロケールのサイトデータ参照オブジェクトを返す", "children": [] } ] }, { "level": 3, "title": "Client API Helpers", "slug": "client-api-helpers", "children": [ { "level": 4, "title": "defineClientAppEnhance: clientAppEnhanceFilesを作成するためのヘルパー", "slug": "defineclientappenhance-clientappenhancefilesを作成するためのヘルパー", "children": [] } ] } ], "git": {}, "filePathRelative": "articles/vuePress/client-API.md" }
usePageFrontmatter 現在ページの frontmatterオブジェクトを返す
<script setup lang="ts">
import { usePageFrontmatter } from '@vuepress/client'
// usePageFrontmatter
const pageFrontmatter = usePageFrontmatter().value;
</script>
<template>
{{ pageFrontmatter }}
</template>
表示結果 例 pageFrontmatter
{ "title": "VuePress Client API メソッド", "description": null, "date": "2022-04-25T00:00:00.000Z", "lastUpdatedAt": "2022-04-26T00:00:00.000Z", "image": "VuePress.webp", "tags": null }
mdファイルでは $frontmatter で同様のデータを取得できる
{{ $frontmatter }}
{ "title": "VuePress Client API メソッド", "description": null, "date": "2022-04-25T00:00:00.000Z", "lastUpdatedAt": "2022-04-26T00:00:00.000Z", "image": "VuePress.webp", "tags": null }
その他 Client API メソッド
usePageHead: 現在ページの head config ref オブジェクトを返す
{{ pageHead }}
[ [ "title", {}, "VuePress Client API メソッド | VuePress v2 DEMO" ], [ "meta", { "name": "description", "content": "Just playing around" } ] ]
usePageHeadTitle: 現在ページの ヘッドタイトル参照オブジェクトを返す
{{ pageHeadTitle }}
VuePress Client API メソッド | VuePress v2 DEMO
usePageLang: 現在ページの言語参照オブジェクトを返す
{{ pageLang }}
ja
useRouteLocale: 現在のルートのロケールパス参照オブジェクトを返す
{{ routeLocale }}
/
useSiteData: サイトデータ参照オブジェクト を返す
{{ siteData }}
{ "base": "/", "lang": "ja", "title": "VuePress v2 DEMO", "description": "Just playing around", "head": [], "locales": {} }
useSiteLocaleData: 現在のロケールのサイトデータ参照オブジェクトを返す
{{ siteLocaleData }}
{ "base": "/", "lang": "ja", "title": "VuePress v2 DEMO", "description": "Just playing around", "head": [], "locales": {} }
Client API Helpers
defineClientAppEnhance: clientAppEnhanceFilesを作成するためのヘルパー
Plugin API の clientAppEnhanceFiles フックで、クライアントアプリの拡張ファイルへのパスを設定する。プラグインやテーマで使用可能