# VuePress で自作のコンポーネントを使う方法

vuepress 公式サイト(opens new window) のプラグインを使うと、components フォルダの .vue ファイルを自動でコンポーネント登録してくれます。

# プラグインのインストール

yarn add -D @vuepress/plugin-register-components

# プラグインの設定

.vuepress > config.js にプラグインを追加します。

module.exports = {
  plugins: ['@vuepress/register-components']
}

# コンポーネントの追加

.vuepress > components フォルダに .vue ファイルを作成します。

今回は、Counter.vue を作成します。

<template>
    <div>
        <button v-on:click="count++">クリックするとカウントが増えるよ</button>
        <p>カウンター：{{ count }}</p>
    </div>
</template>
<script>
export default {
    name: 'Counter',
    data: function () {
        return {
            count: 0
        }
    },
}
</script>

# 記事ファイルへの追加

_posts の .md ファイルにコンポーネントを追加します。

<counter />

# カウンターコンポーネント

カウンター：0