YC Demo Vue3

A Vue 3 component library for building beautiful demo and example pages. This library provides a set of components that make it easy to create organized, interactive demonstration pages for your Vue applications.

Features

• 🎯 Easy-to-use demo page components
• 📱 Responsive and modern design
• 🎨 Clean and intuitive UI
• 🔍 Quick navigation between examples
• 📦 Lightweight and performant

Installation

npm install yc-demo-vue3

Usage

import { createApp } from 'vue'
import YcDemoVue3 from 'yc-demo-vue3'
import 'yc-demo-vue3/style'

const app = createApp(App)
app.use(YcDemoVue3)

Components

YcDemoApp

The root component that creates the main demo application layout.

Props

• options (Object)
  • name (String): The title of the demo application (default: 'Examples')
  • width (String): The width of the app container (default: '100vw')
  • height (String): The height of the app container (default: '100vh')
  • menus (Array): Array of menu items, each containing name and component

Example

<template>
  <YcDemoApp :options="options" />
</template>

<script setup>
import { ref } from 'vue'
import TestPage from './TestPage.vue'

const options = ref({
  name: 'My Demo App',
  menus: [
    { name: 'Basic Examples', component: TestPage }
  ]
})
</script>

YcDemoPage

A container component for organizing multiple demo cases.

Example

<template>
  <YcDemoPage>
    <YcDemoCase name="Basic Usage">
      <!-- Your demo content -->
    </YcDemoCase>
    <YcDemoCase name="Advanced Features">
      <!-- More demo content -->
    </YcDemoCase>
  </YcDemoPage>
</template>

YcDemoCase

A component for displaying individual examples or demo cases.

Props

• name (String): The name of the demo case
• desc (String): Description of the demo case

Example

<template>
  <YcDemoCase 
    name="Button Variants" 
    desc="Different styles of buttons available in the library"
  >
    <!-- Your demo implementation -->
  </YcDemoCase>
</template>

License

MIT