Essentials

Configuration

Advanced configuration

With Nuxt

nuxt.config.ts
export default defineNuxtConfig({
  compodium: {
     /* Customize Compodium's base directory. */
    dir: 'compodium/',

     /* List of glob patterns to exclude components. */
    exclude: [],

     /* Whether to include default collections for third-party libraries. */
    includeLibraryCollections: true,

    extras: {
      /*
       * Customize Compodium's UI colors.
       * See https://ui.nuxt.com/getting-started/theme#colors for acceptable values.
       */
      colors: {
        primary: 'green',
        neutral: 'zinc'
      }
    }
  }
})

With Vue

vite.config.ts
import { defineConfig } from 'vite'
import { compodium } from '@compodium/vue'

export default defineConfig({
  plugins: [
    compodium({
      /* Customize the directories where components are discovered */
      componentDirs: [
        { path: './src/components', pathPrefix: false }
      ],

      /* Customize compodium's base directory. */
      dir: 'compodium/',

      /**
       * Configure your application's mainPath
       */
      mainPath: 'src/main.ts',

      /* List of glob patterns to ignore components */
      ignore: [],

      /* Whether to include default collections for third-party libraries. */
      includeLibraryCollections: true,

      extras: {
        /*
         * Customize Compodium's UI Colors.
         * See: https://ui.nuxt.com/getting-started/theme#colors for acceptable values
         */
        colors: {
          primary: 'green',
          neutral: 'zinc'
        }
      }
    })
  ],
})
© 2025 Romain Hamel