N Akita's Blog

VitePress ​

sh
bun add -D vitepress
sh
bun vitepress init
sh
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme + Customization
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run bun run docs:dev and start writing.

Tips:
- Make sure to add .vitepress/dist and .vitepress/cache to your .gitignore file.
- Since you've chosen to customize the theme, you should also explicitly install vue as a dev dependency.

Directory Structure ​

.
|-- .vitepress
|   |-- config.mts
|   `-- theme
|       |-- index.ts
|       `-- style.css
|-- api-examples.md
|-- index.md
|-- markdown-examples.md
`-- package.json
sh
bun run docs:dev

Accesse Browser ​

 http://localhost:5173/

img

Vue Components ​

.
|-- .vitepress
|   |-- components
|   |   |-- VitePress.vue
|   |   `-- YouTube.vue
|   |-- config.mts
|   `-- theme
|       |-- config.ts
|       |-- custom.css
|       `-- index.ts
|-- index.md
|-- package.json
|-- postcss.config.js
`-- tailwind.config.js
vue
<script lang="ts" setup>
const title: string = 'VitePress'
const description: string = `最小限の設定で動作するため、
複雑な構成に悩まされることなく、
簡単に美しいドキュメントを作成できます。`
const feature: string = 'Vueコンポーネントを簡単に統合可能です。'
</script>

<template>
    <div>
        <h1>{{ title }}</h1>
        <p>{{ description }}</p>
        <p>{{ feature }}</p>
    </div>
</template>
ts
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import './style.css'
// import Components
import VitePress from '../components/VitePress.vue'

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    })
  },
  enhanceApp({ app }) {
    app.component('VitePress', VitePress)
  },
} satisfies Theme
md
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "My Awesome Project"
  text: "A VitePress Site"
  tagline: My great project tagline
  actions:
    - theme: brand
      text: Markdown Examples
      link: /markdown-examples
    - theme: alt
      text: API Examples
      link: /api-examples

features:
  - title: Feature A
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - title: Feature B
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - title: Feature C
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
---

<VitePress />

img

Tailwind CSS ​

sh
bun add -d tailwindcss postcss autoprefixer
sh
bunx tailwindcss init
js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['.vitepress/**/*.{vue,md}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
...

Vue & Tailwind CSS Example ​

ts
<script lang="ts" setup>
const title: string = 'VitePress'
const description: string = `最小限の設定で動作するため、
複雑な構成に悩まされることなく、
簡単に美しいドキュメントを作成できます。`
const feature: string = 'Vueコンポーネントを簡単に統合可能です。'
</script>

<template>
    <div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-xl mt-12 border border-gray-200">
        <h1 class="text-5xl font-extrabold text-center text-indigo-600 mb-6">{{ title }}</h1>
        <p class="text-lg text-gray-600 mb-4 leading-relaxed text-center">{{ description }}</p>
        <div class="flex items-center justify-center space-x-2 mt-6">
            <p class="text-lg text-gray-800 font-semibold">{{ feature }}</p>
        </div>
    </div>
</template>

img

Youtube Embed ​

vue
<script>
export default {
  props: {
    videoId: {
      type: String,
      required: true,
    },
  },
}
</script>

<template>
  <div class="video-container">
    <iframe width="560" height="315" :src="`https://www.youtube.com/embed/${videoId}`" frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe>
  </div>
</template>

<style scoped>
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
ts
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
// import Components 
import VitePress from '../components/VitePress.vue'
import YouTube from '../components/YouTube.vue'

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    })
  },
  enhanceApp({ app }) {
    app.component('VitePress', VitePress)
    app.component('YouTube', YouTube)
  },
} satisfies Theme
  • https://www.youtube.com/watch?v=*** : ***
md
<YouTube videoId="***" />

Example ​

Vitepress Plugin Group Icons ​

sh
bun add -d vitepress-plugin-group-icons
ts
import Theme from 'vitepress/theme'
import 'virtual:group-icons.css'
...
ts
import Theme from 'vitepress/theme'
import 'virtual:group-icons.css'
...

vitepress-plugin-tabs ​

sh
bun add -d vitepress-plugin-tabs
ts
import { defineConfig } from 'vitepress'
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(tabsMarkdownPlugin)
    }
  }
})
ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    enhanceAppWithTabs(app)
  }
} satisfies Theme

Mermaid ​

sh
bun add -d vitepress-plugin-mermaid
ts
import { defineConfig } from 'vitepress'
import { withMermaid } from 'vitepress-plugin-mermaid'

// https://vitepress.dev/reference/site-config
export default withMermaid(
  defineConfig({
    ...
  }),
)
mermaid
flowchart LR
  Start --> Stop

PlantUML ​

sh
bun add -d markdown-it-plantuml
ts
import { defineConfig } from 'vitepress'
import markdownItPlantuml from 'markdown-it-plantuml'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  markdown: {
    config(md) {
      md.use(markdownItPlantuml)
    },
  },
  ...
})
@startuml
Bob -> Alice : こんにちは！
@enduml
uml diagram

© nakita-ypm.github.io/blog