VuePress セットアップ ~ テーマ & マークダウン 設定

vuePress 公開日: 2022-02-10 更新: 2022-04-25

• サイト名、ディスクリプションなどのメタデータを設定
• vuePress デフォルトテーマの設定（カスタマイズ）navbar, sidebar, etc
• マークダウン 設定
• プラグイン設定
  • componentsディレクトリ内のVueコンポーネントを .mdファイル （記事）内で読み込めるように設定

サイト名、ディスクリプションなどのメタデータを設定

doc- configuration

doc- Site Config

参考- VuePress の基本設定

// docs/.vuepress/config.ts
// https://v2.vuepress.vuejs.org/guide/configuration.html
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  // === site config メタデータ ===
  title: 'VuePress v2 DEMO',
  lang: 'ja',
  description: 'Just playing around',
  // ...
})

vuePress デフォルトテーマの設定（カスタマイズ）navbar, sidebar, etc

doc- theme Config

doc- default-theme Config

// docs/.vuepress/config.ts
// ...
export default defineUserConfig({
  // site config メタデータ
  // ...

  // === theme config === https://v2.vuepress.vuejs.org/reference/default-theme/config
  theme: defaultTheme({
    // set config here
    navbar: [], // false で TOPナビゲーションバー非表示 https://v2.vuepress.vuejs.org/reference/default-theme/config.html#navbar
    logo: '/images/programing.jpg', // TOPナビゲーションバー ロゴ画像
    sidebar: auto, // false で サイドバー非表示 デフォルト auto (ページヘッダーから自動的に生成)
    sidebarDepth: 2, // ページヘッダーから自動生成されるサイドバーチルドレンの最大深度 デフォルト 2 = <h2> and <h3> headers
    notFound: ['ページが見つかりませんでした'], // 404ページで表示されるテキスト https://v2.vuepress.vuejs.org/reference/default-theme/config.html#notfound
    backToHome: 'TOPページへ戻る', // 404ページで表示されるTOPページへのリンクテキスト
  },

})

マークダウン 設定

doc- markdown-config

doc- guide-markdown

// docs/.vuepress/config.ts
// ...
export default defineUserConfig({
  // ...

  // === markdown config ===
  markdown: {
    anchor: true, // false で、ヘッダーホバー時に # でリンクを非表示
    code: {
      highlightLines: true, // コードブロックで指定した行のハイライトをONにするか？
      lineNumbers: true, // コードブロックで行番号を表示するか？
    },
    extractHeaders: {
      level: [3, 4] // サイドバーや目次などの生成に使用するページデータに抽出するヘッダーの指定 デフォルト [2, 3]
    },
    links: { // https://v2.vuepress.vuejs.org/reference/config.html#markdown-links
      internalTag: 'RouterLink', // 内部リンクを <RouterLink> or <a> のどちらに変換するか？
      externalAttrs: { target: '_blank', rel: 'noopener noreferrer' }, // 外部リンクに付与する属性値
    },
    toc: { // https://v2.vuepress.vuejs.org/reference/config.html#markdown-toc
      level: [3, 4] // .mdファイル内で [[toc]] による もくじの自動生成に含めるヘッダーの指定 デフォルト [2, 3]
    }
  },

})

プラグイン設定

doc- plugin-config

doc- plugin-api

componentsディレクトリ内のVueコンポーネントを .mdファイル （記事）内で読み込めるように設定

.mdファイル （記事）内で vue-component-を使う

doc- register-components

公式プラグイン @vuepress/plugin-register-components@next をインストール

npm i -D @vuepress/plugin-register-components@next

plugins config に componentsDir を追加

// docs/.vuepress/config.ts
// ...
import { path } from '@vuepress/utils'
// register-components プラグイン // https://v2.vuepress.vuejs.org/reference/plugin/register-components
import { registerComponentsPlugin } from '@vuepress/plugin-register-components'

export default defineUserConfig({
  // ...
  // === plugins config === // https://v2.vuepress.vuejs.org/reference/config.html#plugin-config
  plugins: [
    registerComponentsPlugin({
      // このディレクトリのファイルは、自動的にVueコンポーネントとして登録
      componentsDir: path.resolve(__dirname, './components'),
    }),
  ],

})

components/ ディレクトリ にVueコンポーネントファイルを作成

// docs/.vuepress/components/MyCounter.vue
<script setup lang="ts">
import 'virtual:windi.css'
import { ref } from 'vue'

const count = ref(100)

</script>

<template>
  <div class="w-3/5 rounded-3xl bg-gray-200 p-3 text-center">

    <div class="mb-3 text-xl font-extrabold text-green-500">
      {{ count }}
    </div>

    <button @click="count+=100"
      bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
      text="sm white"
      font="mono light"
      p="y-2 x-4"
      m="b-3"
      border="2 rounded blue-200"
    >
      カウントアップ +100
    </button>
  </div>
</template>

.md 記事ファイル内で読み込み

<MyCounter />

表示結果

100