vite-plugin-ox-content-vue

Vue integration for Ox Content - embed Vue components in Markdown.

Installation

pnpm add vite-plugin-ox-content-vue vue @vitejs/plugin-vue

Usage

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { oxContentVue } from 'vite-plugin-ox-content-vue';

export default defineConfig({
  plugins: [
    vue(),
    oxContentVue({
      srcDir: 'docs',
      // Auto-discover components with glob pattern
      components: './src/components/*.vue',
    }),
  ],
});

Options

components

• Type: string | string[] | Record<string, string>

Components to register for use in Markdown. Supports:

Glob Pattern (Recommended)

// Single pattern
components: './src/components/*.vue'

// Multiple patterns
components: ['./src/components/*.vue', './src/ui/*.vue']

Component names are derived from file names in PascalCase:

• counter.vue → Counter

• my-button.vue → MyButton

• AlertBox.vue → AlertBox

Explicit Map

components: {
  Counter: './src/components/Counter.vue',
  MyAlert: './src/components/AlertBox.vue',
}

reactivityTransform

• Type: boolean

• Default: false

Enable Vue Reactivity Transform.

customBlocks

• Type: boolean

• Default: true

Enable custom blocks in Markdown (e.g., :::tip).

Using Components in Markdown

# My Page

Here's an interactive counter:

<Counter :initial="5" />

And an alert:

<Alert type="warning">
  This is a warning message!
</Alert>

Example Component

<!-- src/components/Counter.vue -->
<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  initial?: number;
}>();

const count = ref(props.initial ?? 0);
</script>

<template>
  <div class="counter">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<style scoped>
.counter {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
</style>

Virtual Modules

• virtual:ox-content-vue/runtime - Vue-specific runtime

• virtual:ox-content-vue/components - Registered components

import { OxContentRenderer, useOxContent } from 'virtual:ox-content-vue/runtime';
import components from 'virtual:ox-content-vue/components';

HMR

Components are hot-reloaded when modified. Markdown files using those components are also refreshed.