Vue Integration Example

Demonstrates embedding Vue 3 components in Markdown.

Setup

cd examples/integ-vue
pnpm install
pnpm dev

Configuration

// 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 all Vue components
      components: './src/components/*.vue',
    }),
  ],
});

Components

Counter

Interactive counter with increment/decrement buttons.

<script setup lang="ts">
import { ref } from 'vue';

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

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

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

Alert

Styled alert box with different types.

<script setup lang="ts">
defineProps<{
  type?: 'info' | 'warning' | 'error' | 'success';
}>();
</script>

<template>
  <div :class="['alert', type ?? 'info']">
    <slot />
  </div>
</template>

CodeDemo

Live code demonstration with preview.

Usage in Markdown

# My Documentation

<Counter :initial="10" />

<Alert type="warning">
  Be careful with this feature!
</Alert>

<CodeDemo language="vue">
  <!-- Your code here -->
</CodeDemo>

File Structure

integ-vue/
├── docs/
│   └── index.md
├── src/
│   ├── components/
│   │   ├── Counter.vue
│   │   ├── Alert.vue
│   │   └── CodeDemo.vue
│   ├── App.vue
│   └── main.ts
├── index.html
├── package.json
└── vite.config.ts