Compodium

A plug and play component playground for Vue and Nuxt.

Documentation

[!WARNING] This project is in its early stages and will evolve. Expect frequent updates and potential changes. Feedback is welcome!

Features

• Effortless Setup: Simple setup process and minimal maintenance, allowing you to focus on building components.
• No Stories Required: Analyzes your component code directly, eliminating the need to write stories.
• Fast: Built on top of Vite for rapid development and instant feedback, enhancing productivity.
• DevTools Integration: Integrates with Vue and Nuxt devtools for a cohesive development experience.
• UI Library Integrations: Integrates with popular UI libraries, showcasing examples for locally installed components.
• Code generation: Generates up-to-date template code based on component props, ready to copy and use instantly.

Installation

Nuxt

npx nuxi@latest module add --dev compodium

Vue

1. Install @compodium/vue

pnpm add -D @compodium/vue

yarn add --dev @compodium/vue

npm install --save-dev @compodium/vue

bun add -D @compodium/vue

2. Add the Compodium plugin in your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import { compodium } from '@compodium/vue'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    compodium()
  ]
})

3. Include compodium types in your tsconfig.app.json

{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "node_modules/@compodium/vue/dist/index.d.ts"
  ],
}

Contribution

Contributions are welcome! ♥️

Currently, one way you can contribute is by adding examples for your favorite component library. You can find the Nuxt UI collection and examples here.

Local development

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Run ESLint
pnpm lint

# Run typechecks 
pnpm typechecks 

# Run Vitest
pnpm test