Warning
This project is in its early stages and will evolve. Expect frequent updates and potential changes. Feedback is welcome!
- 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.
npx nuxi@latest module add --dev compodium- Install
@compodium/vue
pnpm add -D @compodium/vueyarn add --dev @compodium/vuenpm install --save-dev @compodium/vuebun add -D @compodium/vue- 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()
]
})- Include compodium types in your
tsconfig.app.json
{
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"node_modules/@compodium/vue/dist/index.d.ts"
],
}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