Zenn
⚡️

VitePress v1.0 公式リリースにつき簡単にまとめた

2024/03/31に公開
Vue.js
tech

はじめに

VitePress の v1.0 が公式リリースされたので調べてみた
自分は VuePress も触ったことがなく、VitePress も今回 1.0 が出たことで知ったくらいのにわかだ
気を抜くとバイトプレスって言ってしまうくらいのにわかだ（実際はヴィートプレス）
すでに使ったことがある、馴染みが深いって方は暖かい目で見守って下さい
興味あるけど触ったことがないって方はよければ見て下さい
何ができるか、どんな利点があるか調査してみた

基本的なセットアップ

セットアップは下記の手順通り行う
Node のバージョンが 18 以降でないと使用できないので注意
https://vitepress.dev/guide/getting-started

VitePress とは？

そもそも何ができるのか？
どんなツールなのか
VitePress は Vue をベースとした静的サイトジェネレータで、Vite を使用していることで VuePress より速い.
（VitePress は Vue & Vite、VuePress は Vue & WebPack）
ドキュメントやブログ、ポートフォリオサイト、マーケティングサイトを作成するのが主な用途
マークダウン記法でページが作成できる他、script タグを追加することで vue も使用できる
なので、vue に馴染みのある方はすぐに使えると思う

VitePress が使われているサイト例

実際に使われているサイトの例を紹介する
もちろん VitePress の Docs にも使われている

実装例

マークダウンで記述するイメージ

例えば下記のように書くとする

## 見出し

マークダウンで記述できる

## アコーディオン例

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

画面上では下記のようになる
（デフォルトテーマ使用時）

マークダウン記法は下記ページ参照
https://vitepress.dev/guide/markdown

今回初めて触って個人的に便利だなと感じた点は footer や sidebar などの部品が config に記述だけで作成できるところ

config.mts
import { defineConfig } from 'vitepress';

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: 'vitePressSample',
  description: 'A VitePress Site',
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: 'Home', link: '/' },
      { text: 'nav', link: '/markdown-examples' },
    ],

    sidebar: [
      {
        text: 'sidebar',
        items: [
          { text: 'nav1', link: '/' },
          { text: 'nav2', link: '/' },
          { text: 'nav3', link: '/' },
        ],
      },
    ],

    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
    ],

    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2019-present Evan You',
    },
  },
});

こんな感じで反映される

まとめ

ドキュメントに沿って何ができるか、どんな利点があるか、実装例を記載してきたが、要点を絞ってまとめていく

  • VitePress 概要と利点

    • Vue ベースの静的サイトジェネレータである
    • 高速なホットリロードとビルド時間（とにかく早い）
    • マークダウンと Vue コンポーネントを合わせて使える
    • 設定とカスタマイズが簡単

  • 利用用途とポテンシャル

    • ドキュメントサイト、ブログ、ポートフォリオサイトなど、様々な用途に利用可能
    • Vue.js エコシステムとの密接な統合により、Vue 開発者にとって非常に魅力的である
    • コミュニティの成長とともに、プラグインやテーマの選択肢が拡がることが期待される

Discussion