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'importvuefrom'@vitejs/plugin-vue'importvueDevToolsfrom'vite-plugin-vue-devtools'import{compodium}from'@compodium/vue'exportdefaultdefineConfig({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