Introduction

Automatic Component Discovery and Analysis

Compodium borrows Nuxt's component scanning feature to retrieve all components within your application. It then uses vue-component-meta to analyze your code and extract component metadata, generating interactive inputs for your component's properties. Built on top of Vite, Compodium ensures fast reloads and a seamless development experience.

This approach removes the need to explicitly write stories for each component. For components that require default properties to render correctly in the playground, you can use the extendCompodiumMeta macro to set default values. Additionally, for more complex components that need specific templates, you can write example components.

Partial Preview Isolation

Compodium integrates directly into your application but operates only in development mode. For Nuxt, it extends your root component, replacing your app.vue component with its own in the preview. This setup ensures that your components within the preview inherit all dependencies provided by Nuxt and your modules.

For Vue, Compodium creates a virtual module from your main.ts file, where your application is initialized, and substitutes your root component with its own in the preview. This allows components in the preview to inherit from your Vue plugins and other dependencies.

In both cases, components in the preview do not inherit from your app.vue (Nuxt) or root component (Vue). However, you can create your own compodium/preview.vue component as a substitute to customize the preview environment.

Third-Party Integrations

Compodium detects installed UI libraries and provides interactive examples in the playground, ensuring components render accurately with your custom styles and behaviors.

This currently only supports Nuxt UI, with plans to integrate more libraries in the near future.