Components

Default Properties

By default, Compodium analyzes your component property definitions. If you have required props without default values, you can use the extendCompodiumMeta macro to specify default properties for your component.

Here is an example of how to use the extendCompodiumMeta macro to set default properties:

<script setup lang="ts">
const props = defineProps<{
  label: string
}>()

extendCompodiumMeta<typeof props>({
  defaultProps: {
    label: 'Click me!'
  }
})
</script>

Component examples

For components that require specific templates, you can provide examples in the compodium/examples/ folder. Note the following:

• Examples will be matched to components based on the filename.
• Each example must be named after its corresponding component, followed by the Example keyword and an optional prefix.

compodium
└── examples
    ├── BaseInputExampleDisabled.vue # Will be added to the BaseInput component.
    ├── BaseButtonExample.vue # Will be the main example for the BaseButton component.
    └── BaseButtonExampleWithLabel.vue  # Will be added to the BaseButton component.

Examples are just vue components to showcase how your component should be used.

<template>
  <BaseButton> Click me! </BaseButton>
</template>

You can use the extendCompodiumMeta macro inside examples

<script setup lang="ts">
extendCompodiumMeta({
  defaultProps: {
    disabled: true
  }
})
</script>

<template>
  <BaseButton> Click me! </BaseButton>
</template>

If your component is not at the top level of the example, use v-bind="$attrs" to correctly bind propertie from the preview

<script setup lang="ts">
defineOptions({
  inheritAttrs: false
})

</script>

<template>
  <BaseProvider>
    <BaseButton v-bind="$attrs"> Click me! </BaseButton>
  </BaseProvider>
</template>

Multiple Variants

Compodium enables the simultaneous display of multiple variants for components with string literal type properties through the combo configuration. This feature is especially useful for demonstrating different styles or sizes of a component.

<script setup lang="ts">
const props = defineProps<{
  label: string
  variant: 'outline' | 'solid'
  size: 'sm' | 'md' | 'lg'
}>()

extendCompodiumMeta<typeof props>({
  combo: ['variant', 'size'],
  defaultProps: {
    label: 'Click me!'
  }
})
</script>