カスタムコンポーネント
VuePress のページは本質的に Vue アプリケーションなので、Markdown 内で Vue コンポーネントを直接使用できます。この記事では、plume テーマでカスタムコンポーネントを作成・登録・使用する方法を紹介します。このページに表示されている色付きカードが最終結果です。
1. コンポーネントを作成
docs/.vuepress/theme/components/ ディレクトリに DemoCard.vue を作成します：
<script setup>
defineProps({
title: { type: String, default: '' },
color: { type: String, default: '#2a9dff' },
})
</script>
<template>
<div class="demo-card" :style="{ '--demo-card-color': color }">
<p v-if="title" class="demo-card-title">{{ title }}</p>
<div class="demo-card-body">
<slot />
</div>
</div>
</template>
<style scoped>
.demo-card {
margin: 16px 0;
padding: 14px 18px;
border: 1px solid var(--demo-card-color);
border-left-width: 4px;
border-radius: 8px;
}
</style>コンポーネントは title と color の 2 つの props を受け取り、<slot /> を通じて Markdown に書かれた内容を受け取ります。
2. コンポーネントを登録
docs/.vuepress/client.ts でグローバル登録します：
import { defineClientConfig } from 'vuepress/client'
import DemoCard from './theme/components/DemoCard.vue'
export default defineClientConfig({
enhance({ app }) {
app.component('DemoCard', DemoCard)
},
})3. 記事で使用
登録後は、どの Markdown ファイルでもコンポーネントタグを直接書けます：
<DemoCard title="これはカスタムコンポーネントです" color="#8b5cf6">
Markdown 内で直接使え、`props` とスロットに対応しています。
</DemoCard>実際のレンダリング結果：
これはカスタムコンポーネントです
Markdown 内で直接使え、`props` とスロットに対応しています。
色を変えてみる
`color` プロパティでカードのテーマカラーを変更できます。
注意点
- コンポーネント名はパスカルケース（例：
DemoCard）を推奨します。HTML のネイティブタグとの衝突を避けられます scoped付きのスタイルはコンポーネント内に閉じ込められ、ページの他の部分に影響しません- コンポーネント内でルート情報などのグローバル状態を使いたい場合は、
enhanceフックでプラグインをインストールするか、vuepress/clientが提供するコンポジション API を直接インポートします
著作権
著作権者：fantasy
ライセンス：表示 4.0 国際 (CC-BY-4.0)