Getting Started

Installation

Learn how to install Compodium in your application.

Setup

With Nuxt

Install Compodium

pnpm add -D @compodium/nuxt

npm install --save-dev @compodium/nuxt

yarn add --dev @compodium/nuxt

bun add -D @compodium/nuxt

Add the Compodium plugin to your `nuxt.config.ts`

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@compodium/nuxt']
})

That's it! You can now access compodium from the Nuxt Devtools or on /__compodium__/devtools.

With Vue

Install Compodium

pnpm add -D @compodium/vue

npm install -D @compodium/vue

yarn add -D @compodium/vue

bun add -D @compodium/vue

Add the Compodium plugin to your `vite.config.ts`

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`

tsconfig.app.json

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

That's it! You can now access compodium from the Vue Devtools or on /__compodium__/devtools.

Introduction

Compodium is designed to streamline your development workflow by providing an easy-to-use, low-maintenance component playground tailored for Vue and Nuxt.

Components

Learn how to customize components in Compodium.