From 22841074bb62cdebbbc6b89e7e9c8ac7a45f278d Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Wed, 5 Mar 2025 13:22:13 +0100
Subject: [PATCH 1/7] refactor!: replace collection settings by nuxt's
 components entry

---
 README.md                                     |  13 +-
 .../components/BaseButtonExampleWithTiti.vue  |   0
 .../my-ui/BaseButtonExampleWithTata.vue       |   3 +
 .../my-ui/BaseButtonExampleWithToto.vue       |   3 +
 playground/components/BaseButton.vue          |  57 +++++
 playground/my-ui/BaseButton.vue               |   3 +
 playground/nuxt.config.ts                     |   4 +
 src/module.ts                                 | 208 ++++++++++--------
 src/runtime/server/api/collections.get.ts     |  14 +-
 src/types.d.ts                                |   1 -
 test/basic.test.ts                            |   8 +-
 test/custom-collection.test.ts                |  61 +++++
 test/fixtures/basic/ui/Button.vue             |   3 +
 test/fixtures/custom-collection/app.vue       |   3 +
 .../components/BasicComponentExample.vue      |   0
 .../compodium/ui/ButtonExample.vue            |   3 +
 .../components/BasicComponent.vue             |   7 +
 .../custom-collection/my-ui/Button.vue        |   3 +
 .../fixtures/custom-collection/nuxt.config.ts |   7 +
 test/fixtures/custom-collection/package.json  |   5 +
 20 files changed, 295 insertions(+), 111 deletions(-)
 create mode 100644 playground/compodium/components/BaseButtonExampleWithTiti.vue
 create mode 100644 playground/compodium/my-ui/BaseButtonExampleWithTata.vue
 create mode 100644 playground/compodium/my-ui/BaseButtonExampleWithToto.vue
 create mode 100644 playground/components/BaseButton.vue
 create mode 100644 playground/my-ui/BaseButton.vue
 create mode 100644 test/custom-collection.test.ts
 create mode 100644 test/fixtures/basic/ui/Button.vue
 create mode 100644 test/fixtures/custom-collection/app.vue
 create mode 100644 test/fixtures/custom-collection/compodium/components/BasicComponentExample.vue
 create mode 100644 test/fixtures/custom-collection/compodium/ui/ButtonExample.vue
 create mode 100644 test/fixtures/custom-collection/components/BasicComponent.vue
 create mode 100644 test/fixtures/custom-collection/my-ui/Button.vue
 create mode 100644 test/fixtures/custom-collection/nuxt.config.ts
 create mode 100644 test/fixtures/custom-collection/package.json

diff --git a/README.md b/README.md
index 6187d273..79c92386 100644
--- a/README.md
+++ b/README.md
@@ -45,16 +45,11 @@ Configure Compodium in your Nuxt project by customizing the settings in your `nu
 ```ts
 export default defineNuxtConfig({
   compodium: {
-    /* Customize your component collections */
-    collections: [
-      { name: 'Components', path: 'components/' }
-    ],
-
     /* Whether to include default collections for third-party libraries. */
     includeDefaultCollections: true,
 
-    /* Customize the directory for preview examples */
-    examples: 'compodium/',
+    /* Customize compodium's base directory */
+    dir: 'compodium/',
 
     /* Customize the preview component path. */
     previewComponent: 'compodium/preview.vue',
@@ -136,11 +131,11 @@ By default, Compodium will detect the UI libraries you have installed and automa
 
 ### Component Examples
 
-You can provide examples for your components in the `compodium/examples` folder. 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 label.
+You can provide examples for your components in the `compodium/` folder. 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 label.
 
 ```bash
 compodium
-└── components                          # The collection's name
+└── components                          # The components base directory
     ├── 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.
diff --git a/playground/compodium/components/BaseButtonExampleWithTiti.vue b/playground/compodium/components/BaseButtonExampleWithTiti.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/playground/compodium/my-ui/BaseButtonExampleWithTata.vue b/playground/compodium/my-ui/BaseButtonExampleWithTata.vue
new file mode 100644
index 00000000..fbd80976
--- /dev/null
+++ b/playground/compodium/my-ui/BaseButtonExampleWithTata.vue
@@ -0,0 +1,3 @@
+<template>
+  <div> Hello </div>
+</template>
diff --git a/playground/compodium/my-ui/BaseButtonExampleWithToto.vue b/playground/compodium/my-ui/BaseButtonExampleWithToto.vue
new file mode 100644
index 00000000..04d85e1b
--- /dev/null
+++ b/playground/compodium/my-ui/BaseButtonExampleWithToto.vue
@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>
diff --git a/playground/components/BaseButton.vue b/playground/components/BaseButton.vue
new file mode 100644
index 00000000..4eb0ed7d
--- /dev/null
+++ b/playground/components/BaseButton.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const _props = defineProps<{
+  string?: string
+  number?: number
+  boolean?: boolean
+  primitiveUnion?: string | number | boolean
+  stringArray?: string[]
+  /**
+    Icon example
+    @IconifyIcon
+   */
+  icon?: string
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  numberArray?: number[]
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  booleanArray?: boolean[]
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  object?: { foo: string }
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  objectArray?: ({ foo: string | number } | { fee: string })[]
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  arrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[]
+  multipleArrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[]
+  objectMatrix?: (({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[])[]
+  numberMatrix?: number[][]
+  literalMatrix?: (number | string | boolean)[][]
+  aVeryVeryVeryLongPropNameWithLongType?: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[][]
+}>()
+
+extendCompodiumMeta<typeof _props>({
+  defaultProps: {
+    string: 'hello',
+    primitiveUnion: 42,
+    objectArray: [{ foo: 'bar' }],
+    object: { foo: 'bar' },
+    arrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
+    multipleArrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
+    objectMatrix: [[{ foo: 'bar' }, { fee: 'bar' }], [{ foo: 42 }]],
+    numberMatrix: [[42, 42], [42]],
+    literalMatrix: [['string', true], [42]]
+  }
+})
+</script>
+
+<template>
+  <p> Supported prop types </p>
+</template>
diff --git a/playground/my-ui/BaseButton.vue b/playground/my-ui/BaseButton.vue
new file mode 100644
index 00000000..04d85e1b
--- /dev/null
+++ b/playground/my-ui/BaseButton.vue
@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 04a71ccb..df0dd9e3 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,5 +1,9 @@
 export default defineNuxtConfig({
   modules: ['@nuxt/ui', '../src/module'],
+  components: [
+    { path: 'components/' },
+    { path: 'my-ui/', prefix: 'D' }
+  ],
   devtools: { enabled: true },
   css: ['~/assets/css/main.css'],
   compatibilityDate: '2025-02-12'
diff --git a/src/module.ts b/src/module.ts
index a888f74f..e5bdb36d 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -7,7 +7,7 @@ import { camelCase, pascalCase } from 'scule'
 import sirv from 'sirv'
 import { scanComponents } from './nuxt'
 import { getComponentCollection } from './runtime/utils'
-import { join } from 'pathe'
+import { basename, join } from 'pathe'
 import { defu } from 'defu'
 import { defaultProps } from './runtime/libs/defaults'
 import { watch } from 'chokidar'
@@ -18,9 +18,6 @@ import { joinURL } from 'ufo'
 import { getLibraryCollections } from './runtime/libs'
 
 export interface ModuleOptions {
-  /* Customize your component collections */
-  collections?: CollectionConfig[]
-
   /* Whether to include default collections for third-party libraries. */
   includeDefaultCollections: boolean
 
@@ -63,14 +60,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     if (!nuxt.options.dev) return
 
-    addComponentsDir({ path: resolve('./runtime/components') })
-
     const appResolver = createResolver(nuxt.options.rootDir)
-
-    options.collections ??= [
-      { name: 'Components', path: nuxt.options.future?.compatibilityVersion === 4 ? 'app/components/' : 'components/' }
-    ]
-
     const libraryCollections = options.includeDefaultCollections ? await getLibraryCollections(nuxt.options, appResolver) : []
 
     let previewComponent = appResolver.resolve(options.previewComponent)
@@ -83,13 +73,13 @@ export default defineNuxtModule<ModuleOptions>({
       getContents: () => `export { default } from '${previewComponent}'`
     })
 
-    nuxt.options.appConfig.compodium = {
-      collections: options.collections.map(c => ({ ...c, id: c.id ?? camelCase(c.name), path: appResolver.resolve(c.path) })).concat(libraryCollections),
-      matchUIColors: options.extras?.ui?.matchColors
-    }
-
     const appConfig = nuxt.options.appConfig
-    appConfig.compodium = defu(nuxt.options.appConfig.compodium as any, { defaultProps })
+
+    appConfig.compodium = defu(appConfig.compodium as any, {
+      matchUIColors: options.extras?.ui?.matchColors,
+      defaultProps,
+      componentsPath: join(nuxt.options.buildDir, '/compodium/components.json')
+    })
 
     nuxt.hooks.hookOnce('app:resolve', (app) => {
       const rootComponent = app.rootComponent
@@ -106,76 +96,103 @@ export default defineNuxtModule<ModuleOptions>({
       if (pages.length) pages.push({ path: '/__compodium__/renderer', file: resolve('./runtime/renderer-placeholder.vue') })
     })
 
-    const examplesDirs = [
-      appResolver.resolve(options.examples),
-      ...options.collections.filter(c => c.examplesPath).map(c => appResolver.resolve(c.examplesPath as string))
-    ]
-
-    const libraryExampleDirs = libraryCollections.map(c => ({ path: resolve(c.examplePath), pattern: '**/*.{vue,ts,tsx}', prefix: c.prefix }))
-
-    const exampleComponents = options.examples
-      ? (await scanComponents([...examplesDirs.map(examplesDir => ({
-          path: examplesDir,
-          pattern: '**/*.{vue,ts,tsx}'
-        })), ...libraryExampleDirs], nuxt.options.rootDir)).map(c => ({ ...c, isExample: true }))
-      : []
-
-    // Watch for changes in example directory
-    const examplesWatcher = watch([...examplesDirs, ...libraryExampleDirs.map(e => e.path)], {
-      persistent: true,
-      awaitWriteFinish: {
-        stabilityThreshold: 200,
-        pollInterval: 100
-      }
-    })
+    // This file will be read directly server side. This is a hack after realising that virtual module didn't work with HMR server side.
+    nuxt.options.nitro.virtual = nuxt.options.nitro.virtual || {}
+    nuxt.options.nitro.virtual['#compodium/nitro/dirs'] = () => {
+      return readFileSync(join(nuxt.options.buildDir, '/compodium/dirs.mjs'), 'utf-8')
+    }
+    nuxt.options.nitro.virtual['#compodium/nitro/collections'] = () => {
+      return readFileSync(join(nuxt.options.buildDir, '/compodium/collections.mjs'), 'utf-8')
+    }
+
+    nuxt.hooks.hookOnce('components:dirs', async (dirs) => {
+      const collections = dirs.map((dir) => {
+        const path = typeof dir === 'string' ? dir : dir.path
+        const id = basename(path)
+        return {
+          ...typeof dir === 'string' ? {} : dir,
+          path,
+          name: pascalCase(id),
+          id
+        }
+      })
+
+      const examplesDirs = collections.map(collection => ({
+        ...collection,
+        path: appResolver.resolve(joinURL(options.examples, collection.id)),
+        pattern: '**/*.{vue,ts,tsx}'
+      }))
+
+      const libraryExampleDirs = libraryCollections.map(c => ({
+        path: resolve(c.examplePath),
+        pattern: '**/*.{vue,ts,tsx}',
+        prefix: c.prefix
+      }))
+
+      // @ts-expect-error type not resolved
+      appConfig.compodium.collections = collections.concat(libraryCollections)
+
+      const exampleComponents = options.examples
+        ? (await scanComponents([
+            ...examplesDirs,
+            ...libraryExampleDirs
+          ], nuxt.options.rootDir)).map(c => ({ ...c, isExample: true }))
+        : []
+
+      // Watch for changes in example directory
+      const examplesWatcher = watch([...examplesDirs, ...libraryExampleDirs].map(e => e.path), {
+        persistent: true,
+        awaitWriteFinish: {
+          stabilityThreshold: 200,
+          pollInterval: 100
+        }
+      })
+
+      examplesWatcher.on('add', async (path) => {
+        const comps = await scanComponents(examplesDirs, nuxt.options.rootDir)
+        const newExample = comps.find(c => c.filePath === path)
+        if (newExample) {
+          exampleComponents.push({ ...newExample, isExample: true })
+          await updateTemplates({
+            filter: template => template.filename === 'compodium/components.json'
+          })
+        }
+      })
 
-    // FIXME: This might cause a race condition with the vite plugin.
-    examplesWatcher.on('add', async (path) => {
-      const comps = await scanComponents(examplesDirs.map(examplesDir => ({ path: examplesDir, pattern: '**/*.{vue,ts,tsx}' })), nuxt.options.rootDir)
-      const newExample = comps.find(c => c.filePath === path)
-      if (newExample) {
-        exampleComponents.push({ ...newExample, isExample: true })
+      examplesWatcher.on('unlink', async (path) => {
+        const index = exampleComponents.findIndex(c => c.filePath === path)
+        if (index !== -1) exampleComponents.splice(index, 1)
         await updateTemplates({
           filter: template => template.filename === 'compodium/components.json'
         })
-      }
-    })
-
-    examplesWatcher.on('unlink', async (path) => {
-      const index = exampleComponents.findIndex(c => c.filePath === path)
-      if (index !== -1) exampleComponents.splice(index, 1)
-      await updateTemplates({
-        filter: template => template.filename === 'compodium/components.json'
       })
-    })
 
-    addTemplate({
-      filename: 'compodium/components.json',
-      write: true,
-      getContents: ({ nuxt, app }) => {
-        const collections = (nuxt.options.appConfig.compodium as any).collections
-        const components = [...app.components, ...exampleComponents]
-        return JSON.stringify(components.reduce((acc, component) => {
-          const collection = getComponentCollection<CollectionConfig & Collection>(component, collections)
-
-          const componentId = camelCase(component.kebabName)
-          const baseName = collection?.prefix
-            ? component.pascalName.replace(new RegExp(`^${pascalCase(collection?.prefix)}`), '')
-            : component.pascalName
-
-          acc[componentId] = {
-            ...component,
-            baseName,
-            componentId,
-            collectionId: collection?.id,
-            docUrl: collection?.getDocUrl?.(component.pascalName)
-          }
-          return acc
-        }, {} as Record<string, any>), null, 2)
-      }
-    })
+      addTemplate({
+        filename: 'compodium/components.json',
+        write: true,
+        getContents: ({ app }) => {
+          const collections = (appConfig.compodium as any).collections
+          const components = [...app.components, ...exampleComponents].reduce((acc, component) => {
+            const collection = getComponentCollection<CollectionConfig & Collection>(component, collections)
+            const componentId = camelCase(component.kebabName)
+            const baseName = collection?.prefix
+              ? component.pascalName.replace(new RegExp(`^${pascalCase(collection?.prefix)}`), '')
+              : component.pascalName
+
+            acc[componentId] = {
+              ...component,
+              baseName,
+              componentId,
+              collectionId: collection?.id,
+              docUrl: collection?.getDocUrl?.(component.pascalName)
+            }
+            return acc
+          }, {} as Record<string, any>)
+
+          return JSON.stringify(components, null, 2)
+        }
+      })
 
-    nuxt.hooks.hookOnce('components:dirs', (dirs) => {
       addTemplate({
         filename: 'compodium/dirs.mjs',
         write: true,
@@ -183,7 +200,28 @@ export default defineNuxtModule<ModuleOptions>({
           return `export default ${JSON.stringify([...dirs, ...examplesDirs, ...libraryExampleDirs])}`
         }
       })
-      addVitePlugin(compodiumVite({ dirs: [...dirs, ...examplesDirs, ...libraryExampleDirs] }))
+
+      addTemplate({
+        filename: 'compodium/collections.mjs',
+        write: true,
+        getContents: () => {
+          return `export default ${JSON.stringify(collections.concat(libraryCollections))}`
+        }
+      })
+
+      // This file will be read directly server side. This is a hack after realising that virtual module didn't work with HMR server side.
+      nuxt.options.nitro.virtual!['#compodium/nitro/dirs'] = () => {
+        return readFileSync(join(nuxt.options.buildDir, '/compodium/dirs.mjs'), 'utf-8')
+      }
+      nuxt.options.nitro.virtual!['#compodium/nitro/collections'] = () => {
+        return readFileSync(join(nuxt.options.buildDir, '/compodium/collections.mjs'), 'utf-8')
+      }
+
+      addVitePlugin(compodiumVite({
+        dirs: [...dirs, ...examplesDirs, ...libraryExampleDirs]
+      }))
+
+      addComponentsDir({ path: resolve('./runtime/components'), priority: -1 })
     })
 
     if (process.env.COMPODIUM_LOCAL === 'true') {
@@ -225,14 +263,6 @@ export default defineNuxtModule<ModuleOptions>({
       })
     }
 
-    // This file will be read directly server side. This is a hack after realising that virtual module didn't work with HMR server side.
-    nuxt.options.nitro.virtual = nuxt.options.nitro.virtual || {}
-    nuxt.options.nitro.virtual['#compodium/nitro/dirs'] = () => {
-      return readFileSync(join(nuxt.options.buildDir, '/compodium/dirs.mjs'), 'utf-8')
-    }
-
-    (appConfig.compodium as any).componentsPath = join(nuxt.options.buildDir, '/compodium/components.json')
-
     addServerHandler({
       method: 'get',
       route: '/__compodium__/api/collections',
diff --git a/src/runtime/server/api/collections.get.ts b/src/runtime/server/api/collections.get.ts
index f7c8ba02..1563463b 100644
--- a/src/runtime/server/api/collections.get.ts
+++ b/src/runtime/server/api/collections.get.ts
@@ -2,12 +2,12 @@ import fs from 'node:fs/promises'
 import { defineEventHandler } from 'h3'
 import type { Component, ComponentCollection, Collection, ComponentExample } from '../../../types'
 import { useAppConfig } from '#imports'
-import { pascalCase } from 'scule'
 import { getComponentCollection } from '../../utils'
 
 export default defineEventHandler(async () => {
-  const config = useAppConfig().compodium as any
-  const collections = config.collections as Collection[]
+  const config = (useAppConfig().compodium) as any
+  // @ts-expect-error virtual file
+  const collections: Collection[] = await import('#compodium/nitro/collections').then(i => i.default)
 
   const componentsRaw = await fs.readFile(config.componentsPath, 'utf-8')
   const components = Object.values(JSON.parse(componentsRaw)) as (Component | ComponentExample)[]
@@ -17,10 +17,8 @@ export default defineEventHandler(async () => {
     const collection = getComponentCollection(component, collections)
     if (!collection || component.isExample) return acc
 
-    const collectionPrefix = collection.external ? '' : pascalCase(collection.name)
-
-    const componentExamples = examples?.filter(e => e.pascalName.match(`${collectionPrefix}${component.pascalName}Example`))
-    const mainExample = componentExamples.find(e => e.pascalName === `${collectionPrefix}${component.pascalName}Example`)
+    const componentExamples = examples?.filter(e => e.pascalName.startsWith(`${component.pascalName}Example`))
+    const mainExample = componentExamples.find(e => e.pascalName === `${component.pascalName}Example`)
 
     acc[collection.id] ??= { ...collection, components: {} }
     acc[collection.id].components[component.componentId] = {
@@ -30,7 +28,7 @@ export default defineEventHandler(async () => {
       componentId: component.componentId,
       collectionId: collection.id,
       examples: componentExamples.filter(e => e.pascalName !== mainExample?.pascalName).map(e => ({
-        name: e.pascalName.replace(`${collectionPrefix}${component.pascalName}Example`, ''),
+        name: e.pascalName.replace(`${component.pascalName}Example`, ''),
         ...e,
         collectionId: collection.id,
         componentId: component.componentId
diff --git a/src/types.d.ts b/src/types.d.ts
index cffdba46..73d7cc93 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -67,7 +67,6 @@ export type Collection = {
   icon?: string
   prefix?: string
   ignore?: string[]
-  examplesPath?: string
 }
 
 export type ComponentCollection = Collection & {
diff --git a/test/basic.test.ts b/test/basic.test.ts
index cb50f248..7f8926c3 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -41,13 +41,13 @@ describe('basic', async () => {
       const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
       expect(collections.components.components.basicComponent.examples).toEqual([
         expect.objectContaining({
-          baseName: 'ComponentsBasicComponentExampleWithSuffix',
+          baseName: 'BasicComponentExampleWithSuffix',
           collectionId: 'components',
           componentId: 'basicComponent',
           shortPath: 'compodium/components/BasicComponentExampleWithSuffix.vue',
           isExample: true,
           name: 'WithSuffix',
-          pascalName: 'ComponentsBasicComponentExampleWithSuffix'
+          pascalName: 'BasicComponentExampleWithSuffix'
         })
       ])
     })
@@ -55,7 +55,7 @@ describe('basic', async () => {
     it('overrides component with main example', async () => {
       const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
       expect(collections.components.components.basicComponent).toEqual(expect.objectContaining({
-        pascalName: 'ComponentsBasicComponentExample',
+        pascalName: 'BasicComponentExample',
         shortPath: 'compodium/components/BasicComponentExample.vue',
         collectionId: 'components',
         componentId: 'basicComponent'
@@ -65,7 +65,7 @@ describe('basic', async () => {
 
   describe('examples api', () => {
     it('works', async () => {
-      const example = await $fetch('/__compodium__/api/example/componentsBasicComponentExample')
+      const example = await $fetch('/__compodium__/api/example/basicComponentExample')
       expect(example).toMatchInlineSnapshot(`
         "<template>
           <BasicComponent />
diff --git a/test/custom-collection.test.ts b/test/custom-collection.test.ts
new file mode 100644
index 00000000..7d84c4e3
--- /dev/null
+++ b/test/custom-collection.test.ts
@@ -0,0 +1,61 @@
+import { resolve } from 'pathe'
+import { describe, it, expect } from 'vitest'
+import { setup, $fetch } from '@nuxt/test-utils/e2e'
+import type { ComponentCollection } from '~/src/types'
+
+describe('custom collection', async () => {
+  await setup({
+    rootDir: resolve('./test/fixtures/custom-collection'),
+    dev: true,
+    env: {
+      COMPODIUM_TEST: 'true'
+    }
+  })
+
+  describe('collections api', () => {
+    it('works', async () => {
+      const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
+      expect(collections).toEqual({
+        'components': expect.objectContaining({
+          name: 'Components',
+          id: 'components',
+          components: expect.objectContaining({
+            basicComponent: expect.objectContaining({ componentId: 'basicComponent', collectionId: 'components' })
+          })
+        }),
+        'my-ui': expect.objectContaining({
+          name: 'MyUi',
+          id: 'my-ui',
+          components: expect.objectContaining({
+            uButton: expect.objectContaining({ componentId: 'uButton' })
+          })
+        })
+      })
+    })
+
+    // it('assigns component examples', async () => {
+    //   const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
+    //   expect(collections.components.components.basicComponent.examples).toEqual([
+    //     expect.objectContaining({
+    //       baseName: 'ComponentsBasicComponentExampleWithSuffix',
+    //       collectionId: 'components',
+    //       componentId: 'basicComponent',
+    //       shortPath: 'compodium/components/BasicComponentExampleWithSuffix.vue',
+    //       isExample: true,
+    //       name: 'WithSuffix',
+    //       pascalName: 'ComponentsBasicComponentExampleWithSuffix'
+    //     })
+    //   ])
+    // })
+    //
+    // it('overrides component with main example', async () => {
+    //   const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
+    //   expect(collections.components.components.basicComponent).toEqual(expect.objectContaining({
+    //     pascalName: 'ComponentsBasicComponentExample',
+    //     shortPath: 'compodium/components/BasicComponentExample.vue',
+    //     collectionId: 'components',
+    //     componentId: 'basicComponent'
+    //   }))
+    // })
+  })
+})
diff --git a/test/fixtures/basic/ui/Button.vue b/test/fixtures/basic/ui/Button.vue
new file mode 100644
index 00000000..a154d08e
--- /dev/null
+++ b/test/fixtures/basic/ui/Button.vue
@@ -0,0 +1,3 @@
+<template>
+  <span />
+</template>
diff --git a/test/fixtures/custom-collection/app.vue b/test/fixtures/custom-collection/app.vue
new file mode 100644
index 00000000..f6b91380
--- /dev/null
+++ b/test/fixtures/custom-collection/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>custom collection</div>
+</template>
diff --git a/test/fixtures/custom-collection/compodium/components/BasicComponentExample.vue b/test/fixtures/custom-collection/compodium/components/BasicComponentExample.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/test/fixtures/custom-collection/compodium/ui/ButtonExample.vue b/test/fixtures/custom-collection/compodium/ui/ButtonExample.vue
new file mode 100644
index 00000000..a154d08e
--- /dev/null
+++ b/test/fixtures/custom-collection/compodium/ui/ButtonExample.vue
@@ -0,0 +1,3 @@
+<template>
+  <span />
+</template>
diff --git a/test/fixtures/custom-collection/components/BasicComponent.vue b/test/fixtures/custom-collection/components/BasicComponent.vue
new file mode 100644
index 00000000..aa064cea
--- /dev/null
+++ b/test/fixtures/custom-collection/components/BasicComponent.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+defineProps<{ foo: string }>()
+</script>
+
+<template>
+  <span data-testid="basic"> {{ foo }} </span>
+</template>
diff --git a/test/fixtures/custom-collection/my-ui/Button.vue b/test/fixtures/custom-collection/my-ui/Button.vue
new file mode 100644
index 00000000..a154d08e
--- /dev/null
+++ b/test/fixtures/custom-collection/my-ui/Button.vue
@@ -0,0 +1,3 @@
+<template>
+  <span />
+</template>
diff --git a/test/fixtures/custom-collection/nuxt.config.ts b/test/fixtures/custom-collection/nuxt.config.ts
new file mode 100644
index 00000000..499ed6f9
--- /dev/null
+++ b/test/fixtures/custom-collection/nuxt.config.ts
@@ -0,0 +1,7 @@
+export default defineNuxtConfig({
+  modules: ['../../../src/module'],
+  components: [
+    { path: 'components/' },
+    { path: 'my-ui/', prefix: 'U' }
+  ]
+})
diff --git a/test/fixtures/custom-collection/package.json b/test/fixtures/custom-collection/package.json
new file mode 100644
index 00000000..decd4334
--- /dev/null
+++ b/test/fixtures/custom-collection/package.json
@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "name": "basic",
+  "type": "module"
+}

From 91f6698d5d3b3ce2d858da0694e06b0f3b5ca793 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Wed, 5 Mar 2025 14:54:41 +0100
Subject: [PATCH 2/7] feat: add exclude rules

---
 playground/nuxt.config.ts | 11 ++++++++++-
 src/module.ts             | 13 +++++++++++--
 src/utils.ts              |  2 +-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index df0dd9e3..b47b07c9 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -6,5 +6,14 @@ export default defineNuxtConfig({
   ],
   devtools: { enabled: true },
   css: ['~/assets/css/main.css'],
-  compatibilityDate: '2025-02-12'
+  compatibilityDate: '2025-02-12',
+
+  compodium: {
+    excludes: [
+      'InputProps'
+    ],
+    excludeDirs: [
+      'my-ui'
+    ]
+  }
 })
diff --git a/src/module.ts b/src/module.ts
index e5bdb36d..10a9392a 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -14,8 +14,9 @@ import { watch } from 'chokidar'
 import { compodiumVite } from './vite'
 import { colors } from 'consola/utils'
 import { version } from '../package.json'
-import { joinURL } from 'ufo'
+import { joinURL, withTrailingSlash } from 'ufo'
 import { getLibraryCollections } from './runtime/libs'
+import micromatch from 'micromatch'
 
 export interface ModuleOptions {
   /* Whether to include default collections for third-party libraries. */
@@ -24,6 +25,10 @@ export interface ModuleOptions {
   /* Customize the directory for preview examples. Defaults to 'compodium/' */
   examples: string
 
+  excludes: string[]
+
+  excludeDirs: string[]
+
   /* Customize the preview component path. Defaults to compodium/preview.vue */
   previewComponent: string
 
@@ -115,7 +120,7 @@ export default defineNuxtModule<ModuleOptions>({
           name: pascalCase(id),
           id
         }
-      })
+      }).filter(collection => !options?.excludes?.length || !micromatch.isMatch(withTrailingSlash(collection.path), options.excludeDirs, { contains: true }))
 
       const examplesDirs = collections.map(collection => ({
         ...collection,
@@ -173,6 +178,10 @@ export default defineNuxtModule<ModuleOptions>({
         getContents: ({ app }) => {
           const collections = (appConfig.compodium as any).collections
           const components = [...app.components, ...exampleComponents].reduce((acc, component) => {
+            if (options?.excludes?.length && micromatch.isMatch(component.filePath, options.excludes, { contains: true })) {
+              return acc
+            }
+
             const collection = getComponentCollection<CollectionConfig & Collection>(component, collections)
             const componentId = camelCase(component.kebabName)
             const baseName = collection?.prefix
diff --git a/src/utils.ts b/src/utils.ts
index c96c29ac..7568d440 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -12,7 +12,7 @@ import micromatch from 'micromatch'
 export function getComponentCollection<T = Collection | CollectionConfig>(component: Component, collections: T[]) {
   return collections.find((c: any) => {
     if (!c.external && component.filePath?.match('node_modules/')) return false
-    return micromatch.isMatch(component.filePath, [c.path], { ignore: c.ignore, contains: true })
+    return micromatch.isMatch(component.filePath, [c.path], { contains: true })
   })
 }
 

From 391b65cb6522ee9913daf3cbcab579526c311de7 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Wed, 5 Mar 2025 16:23:26 +0100
Subject: [PATCH 3/7] refactor: remove basedir prefix in examples

---
 README.md                                     | 31 +--------
 .../BaseButtonExampleWithTiti.vue             |  0
 .../CompodiumWelcomeExample.vue               |  0
 .../CompodiumWelcomeExampleWithShake.vue      |  0
 .../CompodiumWelcomeExampleWithSpin.vue       |  0
 .../my-ui/BaseButtonExampleWithTata.vue       |  3 -
 .../my-ui/BaseButtonExampleWithToto.vue       |  3 -
 playground/nuxt.config.ts                     |  3 -
 src/module.ts                                 | 66 +++++++++----------
 src/runtime/server/api/component-meta.get.ts  |  3 +-
 test/basic.test.ts                            |  4 +-
 test/custom-collection.test.ts                | 10 +--
 ...tom-preview.test.ts => custom-dir.test.ts} |  2 +-
 .../BasicComponentExample.vue                 |  0
 .../BasicComponentExampleWithSuffix.vue       |  0
 .../BasicComponentExample.vue                 |  0
 .../UButtonExample.vue}                       |  0
 test/fixtures/custom-dir/app.vue              |  3 +
 .../components/TestBasic.vue                  |  0
 .../nuxt.config.ts                            |  2 +-
 .../package.json                              |  0
 .../compodium => custom-dir/play}/preview.vue |  0
 test/fixtures/custom-preview/app.vue          |  3 -
 23 files changed, 44 insertions(+), 89 deletions(-)
 rename playground/compodium/{components => examples}/BaseButtonExampleWithTiti.vue (100%)
 rename playground/compodium/{components => examples}/CompodiumWelcomeExample.vue (100%)
 rename playground/compodium/{components => examples}/CompodiumWelcomeExampleWithShake.vue (100%)
 rename playground/compodium/{components => examples}/CompodiumWelcomeExampleWithSpin.vue (100%)
 delete mode 100644 playground/compodium/my-ui/BaseButtonExampleWithTata.vue
 delete mode 100644 playground/compodium/my-ui/BaseButtonExampleWithToto.vue
 rename test/{custom-preview.test.ts => custom-dir.test.ts} (91%)
 rename test/fixtures/basic/compodium/{components => examples}/BasicComponentExample.vue (100%)
 rename test/fixtures/basic/compodium/{components => examples}/BasicComponentExampleWithSuffix.vue (100%)
 rename test/fixtures/custom-collection/compodium/{components => examples}/BasicComponentExample.vue (100%)
 rename test/fixtures/custom-collection/compodium/{ui/ButtonExample.vue => examples/UButtonExample.vue} (100%)
 create mode 100644 test/fixtures/custom-dir/app.vue
 rename test/fixtures/{custom-preview => custom-dir}/components/TestBasic.vue (100%)
 rename test/fixtures/{custom-preview => custom-dir}/nuxt.config.ts (71%)
 rename test/fixtures/{custom-preview => custom-dir}/package.json (100%)
 rename test/fixtures/{custom-preview/compodium => custom-dir/play}/preview.vue (100%)
 delete mode 100644 test/fixtures/custom-preview/app.vue

diff --git a/README.md b/README.md
index 79c92386..366bfd9b 100644
--- a/README.md
+++ b/README.md
@@ -46,14 +46,11 @@ Configure Compodium in your Nuxt project by customizing the settings in your `nu
 export default defineNuxtConfig({
   compodium: {
     /* Whether to include default collections for third-party libraries. */
-    includeDefaultCollections: true,
+    includeLibraryCollections: true,
 
     /* Customize compodium's base directory */
     dir: 'compodium/',
 
-    /* Customize the preview component path. */
-    previewComponent: 'compodium/preview.vue',
-
     extras: {
       ui: {
         /* If true, Compodium's UI will match your Nuxt UI color theme */
@@ -105,37 +102,13 @@ body {
 > [!NOTE]
 > Compodium renders outside of your `app.vue` component. This is useful if you need to inject CSS or provide parent components.
 
-### Collections
-
-You can control which components are added to the preview using the `collections` configuration. All components inside the specified `path` of your collection will be scanned and added to it.
-
-```ts
-{
-  name: 'Components',
-  path: 'components',
-  /* Add a prefix to all components, similar to Nuxt's components.prefix option */
-  prefix: '',
-  /* Glob patterns for components to ignore */
-  ignore: [],
-  /* If true, the path will be resolved from your node_modules/ folder */
-  external: false,
-  /* Specify a function to generate the components' documentation URL. This will display a button to go to the component's documentation in the preview if specified */
-  getDocUrl?: (componentName: string) => string | null
-}
-```
-
-By default, Compodium will detect the UI libraries you have installed and automatically add a collection with examples for all components. You can disable this by setting `includeDefaultCollections` to `false`.
-
-> [!NOTE]
-> Currently, this feature supports Nuxt UI. More libraries will be added soon!
-
 ### Component Examples
 
 You can provide examples for your components in the `compodium/` folder. 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 label.
 
 ```bash
 compodium
-└── components                          # The components base directory
+└── 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.
diff --git a/playground/compodium/components/BaseButtonExampleWithTiti.vue b/playground/compodium/examples/BaseButtonExampleWithTiti.vue
similarity index 100%
rename from playground/compodium/components/BaseButtonExampleWithTiti.vue
rename to playground/compodium/examples/BaseButtonExampleWithTiti.vue
diff --git a/playground/compodium/components/CompodiumWelcomeExample.vue b/playground/compodium/examples/CompodiumWelcomeExample.vue
similarity index 100%
rename from playground/compodium/components/CompodiumWelcomeExample.vue
rename to playground/compodium/examples/CompodiumWelcomeExample.vue
diff --git a/playground/compodium/components/CompodiumWelcomeExampleWithShake.vue b/playground/compodium/examples/CompodiumWelcomeExampleWithShake.vue
similarity index 100%
rename from playground/compodium/components/CompodiumWelcomeExampleWithShake.vue
rename to playground/compodium/examples/CompodiumWelcomeExampleWithShake.vue
diff --git a/playground/compodium/components/CompodiumWelcomeExampleWithSpin.vue b/playground/compodium/examples/CompodiumWelcomeExampleWithSpin.vue
similarity index 100%
rename from playground/compodium/components/CompodiumWelcomeExampleWithSpin.vue
rename to playground/compodium/examples/CompodiumWelcomeExampleWithSpin.vue
diff --git a/playground/compodium/my-ui/BaseButtonExampleWithTata.vue b/playground/compodium/my-ui/BaseButtonExampleWithTata.vue
deleted file mode 100644
index fbd80976..00000000
--- a/playground/compodium/my-ui/BaseButtonExampleWithTata.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div> Hello </div>
-</template>
diff --git a/playground/compodium/my-ui/BaseButtonExampleWithToto.vue b/playground/compodium/my-ui/BaseButtonExampleWithToto.vue
deleted file mode 100644
index 04d85e1b..00000000
--- a/playground/compodium/my-ui/BaseButtonExampleWithToto.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index b47b07c9..f19ebd2a 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -11,9 +11,6 @@ export default defineNuxtConfig({
   compodium: {
     excludes: [
       'InputProps'
-    ],
-    excludeDirs: [
-      'my-ui'
     ]
   }
 })
diff --git a/src/module.ts b/src/module.ts
index 10a9392a..5fc618ac 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -7,7 +7,7 @@ import { camelCase, pascalCase } from 'scule'
 import sirv from 'sirv'
 import { scanComponents } from './nuxt'
 import { getComponentCollection } from './runtime/utils'
-import { basename, join } from 'pathe'
+import { join } from 'pathe'
 import { defu } from 'defu'
 import { defaultProps } from './runtime/libs/defaults'
 import { watch } from 'chokidar'
@@ -20,18 +20,14 @@ import micromatch from 'micromatch'
 
 export interface ModuleOptions {
   /* Whether to include default collections for third-party libraries. */
-  includeDefaultCollections: boolean
+  includeLibraryCollections: boolean
 
-  /* Customize the directory for preview examples. Defaults to 'compodium/' */
-  examples: string
+  /* Customize compodium's base directory. Defaults to 'compodium/' */
+  dir: string
 
+  /* List of glob patterns to exclude components */
   excludes: string[]
 
-  excludeDirs: string[]
-
-  /* Customize the preview component path. Defaults to compodium/preview.vue */
-  previewComponent: string
-
   extras: {
     ui: {
       /* If true, Compodium's UI will match your Nuxt UI color theme */
@@ -46,9 +42,8 @@ export default defineNuxtModule<ModuleOptions>({
     configKey: 'compodium'
   },
   defaults: {
-    previewComponent: 'compodium/preview.vue',
-    examples: 'compodium/',
-    includeDefaultCollections: true,
+    dir: 'compodium/',
+    includeLibraryCollections: true,
     extras: {
       ui: {
         matchColors: true
@@ -65,10 +60,13 @@ export default defineNuxtModule<ModuleOptions>({
 
     if (!nuxt.options.dev) return
 
+    const compodiumComponentsDir = resolve('./runtime/components')
+    addComponentsDir({ path: compodiumComponentsDir, priority: -1 })
+
     const appResolver = createResolver(nuxt.options.rootDir)
-    const libraryCollections = options.includeDefaultCollections ? await getLibraryCollections(nuxt.options, appResolver) : []
+    const libraryCollections = options.includeLibraryCollections ? await getLibraryCollections(nuxt.options, appResolver) : []
 
-    let previewComponent = appResolver.resolve(options.previewComponent)
+    let previewComponent = appResolver.resolve(joinURL(options.dir, 'preview.vue'))
     if (!existsSync(previewComponent)) {
       previewComponent = resolve('./runtime/preview.vue')
     }
@@ -113,20 +111,22 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.hooks.hookOnce('components:dirs', async (dirs) => {
       const collections = dirs.map((dir) => {
         const path = typeof dir === 'string' ? dir : dir.path
-        const id = basename(path)
         return {
           ...typeof dir === 'string' ? {} : dir,
           path,
-          name: pascalCase(id),
-          id
+          name: 'Components',
+          id: 'components'
         }
-      }).filter(collection => !options?.excludes?.length || !micromatch.isMatch(withTrailingSlash(collection.path), options.excludeDirs, { contains: true }))
-
-      const examplesDirs = collections.map(collection => ({
-        ...collection,
-        path: appResolver.resolve(joinURL(options.examples, collection.id)),
+      }).filter(collection => !micromatch.isMatch(
+        withTrailingSlash(collection.path),
+        [compodiumComponentsDir, 'node_modules/**'],
+        { contains: true })
+      )
+
+      const examplesDir = {
+        path: appResolver.resolve(joinURL(options.dir, 'examples/')),
         pattern: '**/*.{vue,ts,tsx}'
-      }))
+      }
 
       const libraryExampleDirs = libraryCollections.map(c => ({
         path: resolve(c.examplePath),
@@ -137,15 +137,13 @@ export default defineNuxtModule<ModuleOptions>({
       // @ts-expect-error type not resolved
       appConfig.compodium.collections = collections.concat(libraryCollections)
 
-      const exampleComponents = options.examples
-        ? (await scanComponents([
-            ...examplesDirs,
-            ...libraryExampleDirs
-          ], nuxt.options.rootDir)).map(c => ({ ...c, isExample: true }))
-        : []
+      const exampleComponents = (await scanComponents([
+        examplesDir,
+        ...libraryExampleDirs
+      ], nuxt.options.rootDir) ?? []).map(c => ({ ...c, isExample: true }))
 
       // Watch for changes in example directory
-      const examplesWatcher = watch([...examplesDirs, ...libraryExampleDirs].map(e => e.path), {
+      const examplesWatcher = watch([examplesDir, ...libraryExampleDirs].map(e => e.path), {
         persistent: true,
         awaitWriteFinish: {
           stabilityThreshold: 200,
@@ -154,7 +152,7 @@ export default defineNuxtModule<ModuleOptions>({
       })
 
       examplesWatcher.on('add', async (path) => {
-        const comps = await scanComponents(examplesDirs, nuxt.options.rootDir)
+        const comps = await scanComponents([examplesDir], nuxt.options.rootDir)
         const newExample = comps.find(c => c.filePath === path)
         if (newExample) {
           exampleComponents.push({ ...newExample, isExample: true })
@@ -206,7 +204,7 @@ export default defineNuxtModule<ModuleOptions>({
         filename: 'compodium/dirs.mjs',
         write: true,
         getContents: () => {
-          return `export default ${JSON.stringify([...dirs, ...examplesDirs, ...libraryExampleDirs])}`
+          return `export default ${JSON.stringify([...dirs, examplesDir, ...libraryExampleDirs])}`
         }
       })
 
@@ -227,10 +225,8 @@ export default defineNuxtModule<ModuleOptions>({
       }
 
       addVitePlugin(compodiumVite({
-        dirs: [...dirs, ...examplesDirs, ...libraryExampleDirs]
+        dirs: [...dirs, examplesDir, ...libraryExampleDirs]
       }))
-
-      addComponentsDir({ path: resolve('./runtime/components'), priority: -1 })
     })
 
     if (process.env.COMPODIUM_LOCAL === 'true') {
diff --git a/src/runtime/server/api/component-meta.get.ts b/src/runtime/server/api/component-meta.get.ts
index 914ce982..6344fbcf 100644
--- a/src/runtime/server/api/component-meta.get.ts
+++ b/src/runtime/server/api/component-meta.get.ts
@@ -45,7 +45,8 @@ export default defineEventHandler(async (event) => {
             ...defaultProps,
             ...meta.compodium?.defaultProps
           }
-        }
+        },
+        srcMeta: meta
       }
     }
   } catch (err) {
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 7f8926c3..254f481f 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -44,7 +44,7 @@ describe('basic', async () => {
           baseName: 'BasicComponentExampleWithSuffix',
           collectionId: 'components',
           componentId: 'basicComponent',
-          shortPath: 'compodium/components/BasicComponentExampleWithSuffix.vue',
+          shortPath: 'compodium/examples/BasicComponentExampleWithSuffix.vue',
           isExample: true,
           name: 'WithSuffix',
           pascalName: 'BasicComponentExampleWithSuffix'
@@ -56,7 +56,7 @@ describe('basic', async () => {
       const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
       expect(collections.components.components.basicComponent).toEqual(expect.objectContaining({
         pascalName: 'BasicComponentExample',
-        shortPath: 'compodium/components/BasicComponentExample.vue',
+        shortPath: 'compodium/examples/BasicComponentExample.vue',
         collectionId: 'components',
         componentId: 'basicComponent'
       }))
diff --git a/test/custom-collection.test.ts b/test/custom-collection.test.ts
index 7d84c4e3..e416f4b9 100644
--- a/test/custom-collection.test.ts
+++ b/test/custom-collection.test.ts
@@ -16,17 +16,11 @@ describe('custom collection', async () => {
     it('works', async () => {
       const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
       expect(collections).toEqual({
-        'components': expect.objectContaining({
+        components: expect.objectContaining({
           name: 'Components',
           id: 'components',
           components: expect.objectContaining({
-            basicComponent: expect.objectContaining({ componentId: 'basicComponent', collectionId: 'components' })
-          })
-        }),
-        'my-ui': expect.objectContaining({
-          name: 'MyUi',
-          id: 'my-ui',
-          components: expect.objectContaining({
+            basicComponent: expect.objectContaining({ componentId: 'basicComponent', collectionId: 'components' }),
             uButton: expect.objectContaining({ componentId: 'uButton' })
           })
         })
diff --git a/test/custom-preview.test.ts b/test/custom-dir.test.ts
similarity index 91%
rename from test/custom-preview.test.ts
rename to test/custom-dir.test.ts
index f17c889d..d870a836 100644
--- a/test/custom-preview.test.ts
+++ b/test/custom-dir.test.ts
@@ -6,7 +6,7 @@ describe('custom-preview', async () => {
   await setup({
     // FIXME: TypeError: The URL must be of scheme file
     // rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
-    rootDir: resolve('./test/fixtures/custom-preview'),
+    rootDir: resolve('./test/fixtures/custom-dir'),
     dev: true,
     env: {
       COMPODIUM_TEST: 'true'
diff --git a/test/fixtures/basic/compodium/components/BasicComponentExample.vue b/test/fixtures/basic/compodium/examples/BasicComponentExample.vue
similarity index 100%
rename from test/fixtures/basic/compodium/components/BasicComponentExample.vue
rename to test/fixtures/basic/compodium/examples/BasicComponentExample.vue
diff --git a/test/fixtures/basic/compodium/components/BasicComponentExampleWithSuffix.vue b/test/fixtures/basic/compodium/examples/BasicComponentExampleWithSuffix.vue
similarity index 100%
rename from test/fixtures/basic/compodium/components/BasicComponentExampleWithSuffix.vue
rename to test/fixtures/basic/compodium/examples/BasicComponentExampleWithSuffix.vue
diff --git a/test/fixtures/custom-collection/compodium/components/BasicComponentExample.vue b/test/fixtures/custom-collection/compodium/examples/BasicComponentExample.vue
similarity index 100%
rename from test/fixtures/custom-collection/compodium/components/BasicComponentExample.vue
rename to test/fixtures/custom-collection/compodium/examples/BasicComponentExample.vue
diff --git a/test/fixtures/custom-collection/compodium/ui/ButtonExample.vue b/test/fixtures/custom-collection/compodium/examples/UButtonExample.vue
similarity index 100%
rename from test/fixtures/custom-collection/compodium/ui/ButtonExample.vue
rename to test/fixtures/custom-collection/compodium/examples/UButtonExample.vue
diff --git a/test/fixtures/custom-dir/app.vue b/test/fixtures/custom-dir/app.vue
new file mode 100644
index 00000000..05cbdc5c
--- /dev/null
+++ b/test/fixtures/custom-dir/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>custom dir</div>
+</template>
diff --git a/test/fixtures/custom-preview/components/TestBasic.vue b/test/fixtures/custom-dir/components/TestBasic.vue
similarity index 100%
rename from test/fixtures/custom-preview/components/TestBasic.vue
rename to test/fixtures/custom-dir/components/TestBasic.vue
diff --git a/test/fixtures/custom-preview/nuxt.config.ts b/test/fixtures/custom-dir/nuxt.config.ts
similarity index 71%
rename from test/fixtures/custom-preview/nuxt.config.ts
rename to test/fixtures/custom-dir/nuxt.config.ts
index 3369c959..c957d2ee 100644
--- a/test/fixtures/custom-preview/nuxt.config.ts
+++ b/test/fixtures/custom-dir/nuxt.config.ts
@@ -1,6 +1,6 @@
 export default defineNuxtConfig({
   modules: ['../../../src/module'],
   compodium: {
-    rootComponent: 'custom-root.vue'
+    dir: 'play'
   }
 })
diff --git a/test/fixtures/custom-preview/package.json b/test/fixtures/custom-dir/package.json
similarity index 100%
rename from test/fixtures/custom-preview/package.json
rename to test/fixtures/custom-dir/package.json
diff --git a/test/fixtures/custom-preview/compodium/preview.vue b/test/fixtures/custom-dir/play/preview.vue
similarity index 100%
rename from test/fixtures/custom-preview/compodium/preview.vue
rename to test/fixtures/custom-dir/play/preview.vue
diff --git a/test/fixtures/custom-preview/app.vue b/test/fixtures/custom-preview/app.vue
deleted file mode 100644
index 8371b274..00000000
--- a/test/fixtures/custom-preview/app.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>basic</div>
-</template>

From 2bd70f37ca470d13deb7eb4eb061ee6865786d52 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Wed, 5 Mar 2025 16:26:13 +0100
Subject: [PATCH 4/7] chore: up

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 366bfd9b..4cdfa91c 100644
--- a/README.md
+++ b/README.md
@@ -104,7 +104,7 @@ body {
 
 ### Component Examples
 
-You can provide examples for your components in the `compodium/` folder. 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 label.
+You can provide examples for your components in the `compodium/examples/` folder. 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 label.
 
 ```bash
 compodium

From 97b0fc4c8e42e22fe536d9d722f5aa253c7d1ecf Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Wed, 5 Mar 2025 16:57:57 +0100
Subject: [PATCH 5/7] chore: up

---
 .../examples/BaseButtonExampleWithTiti.vue    |  0
 playground/components/BaseButton.vue          | 57 -------------------
 playground/components/InputProps.vue          | 57 -------------------
 playground/components/SupportedProps.vue      | 52 +++++++++++++++++
 playground/my-ui/BaseButton.vue               |  3 -
 playground/nuxt.config.ts                     | 12 +---
 6 files changed, 53 insertions(+), 128 deletions(-)
 delete mode 100644 playground/compodium/examples/BaseButtonExampleWithTiti.vue
 delete mode 100644 playground/components/BaseButton.vue
 delete mode 100644 playground/components/InputProps.vue
 create mode 100644 playground/components/SupportedProps.vue
 delete mode 100644 playground/my-ui/BaseButton.vue

diff --git a/playground/compodium/examples/BaseButtonExampleWithTiti.vue b/playground/compodium/examples/BaseButtonExampleWithTiti.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/playground/components/BaseButton.vue b/playground/components/BaseButton.vue
deleted file mode 100644
index 4eb0ed7d..00000000
--- a/playground/components/BaseButton.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-const _props = defineProps<{
-  string?: string
-  number?: number
-  boolean?: boolean
-  primitiveUnion?: string | number | boolean
-  stringArray?: string[]
-  /**
-    Icon example
-    @IconifyIcon
-   */
-  icon?: string
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  numberArray?: number[]
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  booleanArray?: boolean[]
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  object?: { foo: string }
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  objectArray?: ({ foo: string | number } | { fee: string })[]
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  arrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[]
-  multipleArrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[]
-  objectMatrix?: (({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[])[]
-  numberMatrix?: number[][]
-  literalMatrix?: (number | string | boolean)[][]
-  aVeryVeryVeryLongPropNameWithLongType?: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[][]
-}>()
-
-extendCompodiumMeta<typeof _props>({
-  defaultProps: {
-    string: 'hello',
-    primitiveUnion: 42,
-    objectArray: [{ foo: 'bar' }],
-    object: { foo: 'bar' },
-    arrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
-    multipleArrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
-    objectMatrix: [[{ foo: 'bar' }, { fee: 'bar' }], [{ foo: 42 }]],
-    numberMatrix: [[42, 42], [42]],
-    literalMatrix: [['string', true], [42]]
-  }
-})
-</script>
-
-<template>
-  <p> Supported prop types </p>
-</template>
diff --git a/playground/components/InputProps.vue b/playground/components/InputProps.vue
deleted file mode 100644
index 4eb0ed7d..00000000
--- a/playground/components/InputProps.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-const _props = defineProps<{
-  string?: string
-  number?: number
-  boolean?: boolean
-  primitiveUnion?: string | number | boolean
-  stringArray?: string[]
-  /**
-    Icon example
-    @IconifyIcon
-   */
-  icon?: string
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  numberArray?: number[]
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  booleanArray?: boolean[]
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  object?: { foo: string }
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  objectArray?: ({ foo: string | number } | { fee: string })[]
-  /**
-   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
-   */
-  arrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[]
-  multipleArrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[]
-  objectMatrix?: (({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[])[]
-  numberMatrix?: number[][]
-  literalMatrix?: (number | string | boolean)[][]
-  aVeryVeryVeryLongPropNameWithLongType?: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[][]
-}>()
-
-extendCompodiumMeta<typeof _props>({
-  defaultProps: {
-    string: 'hello',
-    primitiveUnion: 42,
-    objectArray: [{ foo: 'bar' }],
-    object: { foo: 'bar' },
-    arrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
-    multipleArrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
-    objectMatrix: [[{ foo: 'bar' }, { fee: 'bar' }], [{ foo: 42 }]],
-    numberMatrix: [[42, 42], [42]],
-    literalMatrix: [['string', true], [42]]
-  }
-})
-</script>
-
-<template>
-  <p> Supported prop types </p>
-</template>
diff --git a/playground/components/SupportedProps.vue b/playground/components/SupportedProps.vue
new file mode 100644
index 00000000..be110040
--- /dev/null
+++ b/playground/components/SupportedProps.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const _props = defineProps<{
+  // Basic types
+  string?: string
+  number?: number
+  boolean?: boolean
+  primitiveUnion?: string | number | boolean
+
+  // Arrays
+  stringArray?: string[]
+  numberArray?: number[]
+  booleanArray?: boolean[]
+
+  /**
+   * @IconifyIcon
+   */
+  icon?: string
+
+  // Objects
+  object?: { foo: string }
+  objectArray?: ({ foo: string | number } | { fee: string })[]
+  arrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[]
+
+  // Complex types
+  multipleArrayOfMultipleObjects?:
+    | ({ foo: string | number } | { fee: string })[]
+    | ({ foo: number } | { fee: string })[]
+  objectMatrix?:
+    | (({ foo: string | number } | { fee: string })[]
+      | ({ foo: number } | { fee: string })[])[]
+  numberMatrix?: number[][]
+  literalMatrix?: (number | string | boolean)[][]
+}>()
+
+extendCompodiumMeta<typeof _props>({
+  defaultProps: {
+    string: 'hello',
+    primitiveUnion: 42,
+    objectArray: [{ foo: 'bar' }],
+    object: { foo: 'bar' },
+    arrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
+    multipleArrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
+    objectMatrix: [[{ foo: 'bar' }, { fee: 'bar' }], [{ foo: 42 }]],
+    numberMatrix: [[42, 42], [42]],
+    literalMatrix: [['string', true], [42]]
+  }
+})
+</script>
+
+<template>
+  <p>Supported prop types</p>
+</template>
diff --git a/playground/my-ui/BaseButton.vue b/playground/my-ui/BaseButton.vue
deleted file mode 100644
index 04d85e1b..00000000
--- a/playground/my-ui/BaseButton.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index f19ebd2a..04a71ccb 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,16 +1,6 @@
 export default defineNuxtConfig({
   modules: ['@nuxt/ui', '../src/module'],
-  components: [
-    { path: 'components/' },
-    { path: 'my-ui/', prefix: 'D' }
-  ],
   devtools: { enabled: true },
   css: ['~/assets/css/main.css'],
-  compatibilityDate: '2025-02-12',
-
-  compodium: {
-    excludes: [
-      'InputProps'
-    ]
-  }
+  compatibilityDate: '2025-02-12'
 })

From 68a33d721e9512dd94b23429efbd044910c32eb5 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Wed, 5 Mar 2025 17:16:11 +0100
Subject: [PATCH 6/7] chore: up

---
 README.md                                     |  9 ++-
 src/module.ts                                 |  4 +-
 test/basic.test.ts                            |  5 ++
 test/custom-collection.test.ts                | 55 -------------------
 test/custom-compodium-dir.test.ts             | 33 +++++++++++
 test/custom-component-dirs.test.ts            | 42 ++++++++++++++
 test/custom-dir.test.ts                       | 22 --------
 .../components/ExcludedComponent.vue}         |  0
 test/fixtures/basic/nuxt.config.ts            |  8 ++-
 .../app.vue                                   |  0
 .../components/BasicComponent.vue             |  0
 .../nuxt.config.ts                            |  0
 .../package.json                              |  0
 .../play/examples/BasicComponentExample.vue}  |  0
 .../play/preview.vue                          |  0
 .../app.vue                                   |  0
 .../examples/BasicComponentExample.vue        |  0
 .../components/BasicComponent.vue}            |  0
 .../custom-component-dirs/my-ui/Button.vue    |  3 +
 .../nuxt.config.ts                            |  0
 .../package.json                              |  0
 21 files changed, 98 insertions(+), 83 deletions(-)
 delete mode 100644 test/custom-collection.test.ts
 create mode 100644 test/custom-compodium-dir.test.ts
 create mode 100644 test/custom-component-dirs.test.ts
 delete mode 100644 test/custom-dir.test.ts
 rename test/fixtures/{custom-collection/compodium/examples/UButtonExample.vue => basic/components/ExcludedComponent.vue} (100%)
 rename test/fixtures/{custom-dir => custom-compodium-dir}/app.vue (100%)
 rename test/fixtures/{custom-collection => custom-compodium-dir}/components/BasicComponent.vue (100%)
 rename test/fixtures/{custom-dir => custom-compodium-dir}/nuxt.config.ts (100%)
 rename test/fixtures/{custom-collection => custom-compodium-dir}/package.json (100%)
 rename test/fixtures/{custom-collection/my-ui/Button.vue => custom-compodium-dir/play/examples/BasicComponentExample.vue} (100%)
 rename test/fixtures/{custom-dir => custom-compodium-dir}/play/preview.vue (100%)
 rename test/fixtures/{custom-collection => custom-component-dirs}/app.vue (100%)
 rename test/fixtures/{custom-collection => custom-component-dirs}/compodium/examples/BasicComponentExample.vue (100%)
 rename test/fixtures/{custom-dir/components/TestBasic.vue => custom-component-dirs/components/BasicComponent.vue} (100%)
 create mode 100644 test/fixtures/custom-component-dirs/my-ui/Button.vue
 rename test/fixtures/{custom-collection => custom-component-dirs}/nuxt.config.ts (100%)
 rename test/fixtures/{custom-dir => custom-component-dirs}/package.json (100%)

diff --git a/README.md b/README.md
index 4cdfa91c..a9e66c85 100644
--- a/README.md
+++ b/README.md
@@ -45,12 +45,15 @@ Configure Compodium in your Nuxt project by customizing the settings in your `nu
 ```ts
 export default defineNuxtConfig({
   compodium: {
-    /* Whether to include default collections for third-party libraries. */
-    includeLibraryCollections: true,
-
     /* 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: {
       ui: {
         /* If true, Compodium's UI will match your Nuxt UI color theme */
diff --git a/src/module.ts b/src/module.ts
index 5fc618ac..97aeedba 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -26,7 +26,7 @@ export interface ModuleOptions {
   dir: string
 
   /* List of glob patterns to exclude components */
-  excludes: string[]
+  exclude: string[]
 
   extras: {
     ui: {
@@ -176,7 +176,7 @@ export default defineNuxtModule<ModuleOptions>({
         getContents: ({ app }) => {
           const collections = (appConfig.compodium as any).collections
           const components = [...app.components, ...exampleComponents].reduce((acc, component) => {
-            if (options?.excludes?.length && micromatch.isMatch(component.filePath, options.excludes, { contains: true })) {
+            if (options?.exclude?.length && micromatch.isMatch(component.filePath, options.exclude, { contains: true })) {
               return acc
             }
 
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 254f481f..25ac4859 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -61,6 +61,11 @@ describe('basic', async () => {
         componentId: 'basicComponent'
       }))
     })
+
+    it('ignores excluded components', async () => {
+      const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
+      expect(collections.components.components.excludedComponent).toBeUndefined()
+    })
   })
 
   describe('examples api', () => {
diff --git a/test/custom-collection.test.ts b/test/custom-collection.test.ts
deleted file mode 100644
index e416f4b9..00000000
--- a/test/custom-collection.test.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { resolve } from 'pathe'
-import { describe, it, expect } from 'vitest'
-import { setup, $fetch } from '@nuxt/test-utils/e2e'
-import type { ComponentCollection } from '~/src/types'
-
-describe('custom collection', async () => {
-  await setup({
-    rootDir: resolve('./test/fixtures/custom-collection'),
-    dev: true,
-    env: {
-      COMPODIUM_TEST: 'true'
-    }
-  })
-
-  describe('collections api', () => {
-    it('works', async () => {
-      const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
-      expect(collections).toEqual({
-        components: expect.objectContaining({
-          name: 'Components',
-          id: 'components',
-          components: expect.objectContaining({
-            basicComponent: expect.objectContaining({ componentId: 'basicComponent', collectionId: 'components' }),
-            uButton: expect.objectContaining({ componentId: 'uButton' })
-          })
-        })
-      })
-    })
-
-    // it('assigns component examples', async () => {
-    //   const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
-    //   expect(collections.components.components.basicComponent.examples).toEqual([
-    //     expect.objectContaining({
-    //       baseName: 'ComponentsBasicComponentExampleWithSuffix',
-    //       collectionId: 'components',
-    //       componentId: 'basicComponent',
-    //       shortPath: 'compodium/components/BasicComponentExampleWithSuffix.vue',
-    //       isExample: true,
-    //       name: 'WithSuffix',
-    //       pascalName: 'ComponentsBasicComponentExampleWithSuffix'
-    //     })
-    //   ])
-    // })
-    //
-    // it('overrides component with main example', async () => {
-    //   const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
-    //   expect(collections.components.components.basicComponent).toEqual(expect.objectContaining({
-    //     pascalName: 'ComponentsBasicComponentExample',
-    //     shortPath: 'compodium/components/BasicComponentExample.vue',
-    //     collectionId: 'components',
-    //     componentId: 'basicComponent'
-    //   }))
-    // })
-  })
-})
diff --git a/test/custom-compodium-dir.test.ts b/test/custom-compodium-dir.test.ts
new file mode 100644
index 00000000..6e040e8e
--- /dev/null
+++ b/test/custom-compodium-dir.test.ts
@@ -0,0 +1,33 @@
+import { resolve } from 'pathe'
+import { describe, it, expect } from 'vitest'
+import { setup, $fetch } from '@nuxt/test-utils/e2e'
+import type { ComponentCollection } from '~/src/types'
+
+describe('custom compodium dir', async () => {
+  await setup({
+    // FIXME: TypeError: The URL must be of scheme file
+    // rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
+    rootDir: resolve('./test/fixtures/custom-compodium-dir'),
+    dev: true,
+    env: {
+      COMPODIUM_TEST: 'true'
+    }
+  })
+
+  describe('renderer', () => {
+    it('is mounted inside custom preview', async () => {
+      const html = await $fetch('/__compodium__/renderer')
+      expect(html).toContain('<div id="custom-preview">')
+    })
+  })
+
+  it('resolves examples', async () => {
+    const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
+    expect(collections.components.components.basicComponent).toEqual(expect.objectContaining({
+      pascalName: 'BasicComponentExample',
+      shortPath: 'play/examples/BasicComponentExample.vue',
+      collectionId: 'components',
+      componentId: 'basicComponent'
+    }))
+  })
+})
diff --git a/test/custom-component-dirs.test.ts b/test/custom-component-dirs.test.ts
new file mode 100644
index 00000000..f72cde85
--- /dev/null
+++ b/test/custom-component-dirs.test.ts
@@ -0,0 +1,42 @@
+import { resolve } from 'pathe'
+import { describe, it, expect } from 'vitest'
+import { setup, $fetch } from '@nuxt/test-utils/e2e'
+import type { ComponentCollection } from '~/src/types'
+
+describe('custom components dirs', async () => {
+  await setup({
+    rootDir: resolve('./test/fixtures/custom-component-dirs'),
+    dev: true,
+    env: {
+      COMPODIUM_TEST: 'true'
+    }
+  })
+
+  describe('collections api', () => {
+    it('works', async () => {
+      const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
+      expect(collections).toEqual({
+        components: expect.objectContaining({
+          name: 'Components',
+          id: 'components',
+          components: expect.objectContaining({
+            basicComponent: expect.objectContaining({ componentId: 'basicComponent', collectionId: 'components' }),
+            uButton: expect.objectContaining({ componentId: 'uButton' })
+          })
+        })
+      })
+    })
+
+    describe('collections api', () => {
+      it('resolves examples', async () => {
+        const collections = await $fetch<Record<string, ComponentCollection>>('/__compodium__/api/collections')
+        expect(collections.components.components.basicComponent).toEqual(expect.objectContaining({
+          pascalName: 'BasicComponentExample',
+          shortPath: 'compodium/examples/BasicComponentExample.vue',
+          collectionId: 'components',
+          componentId: 'basicComponent'
+        }))
+      })
+    })
+  })
+})
diff --git a/test/custom-dir.test.ts b/test/custom-dir.test.ts
deleted file mode 100644
index d870a836..00000000
--- a/test/custom-dir.test.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { resolve } from 'pathe'
-import { describe, it, expect } from 'vitest'
-import { setup, $fetch } from '@nuxt/test-utils/e2e'
-
-describe('custom-preview', async () => {
-  await setup({
-    // FIXME: TypeError: The URL must be of scheme file
-    // rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
-    rootDir: resolve('./test/fixtures/custom-dir'),
-    dev: true,
-    env: {
-      COMPODIUM_TEST: 'true'
-    }
-  })
-
-  describe('renderer', () => {
-    it('is mounted inside custom preview', async () => {
-      const html = await $fetch('/__compodium__/renderer')
-      expect(html).toContain('<div id="custom-preview">')
-    })
-  })
-})
diff --git a/test/fixtures/custom-collection/compodium/examples/UButtonExample.vue b/test/fixtures/basic/components/ExcludedComponent.vue
similarity index 100%
rename from test/fixtures/custom-collection/compodium/examples/UButtonExample.vue
rename to test/fixtures/basic/components/ExcludedComponent.vue
diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts
index 0e4403a8..34fd721f 100644
--- a/test/fixtures/basic/nuxt.config.ts
+++ b/test/fixtures/basic/nuxt.config.ts
@@ -1,3 +1,9 @@
 export default defineNuxtConfig({
-  modules: ['../../../src/module']
+  modules: ['../../../src/module'],
+
+  compodium: {
+    exclude: [
+      'ExcludedComponent'
+    ]
+  }
 })
diff --git a/test/fixtures/custom-dir/app.vue b/test/fixtures/custom-compodium-dir/app.vue
similarity index 100%
rename from test/fixtures/custom-dir/app.vue
rename to test/fixtures/custom-compodium-dir/app.vue
diff --git a/test/fixtures/custom-collection/components/BasicComponent.vue b/test/fixtures/custom-compodium-dir/components/BasicComponent.vue
similarity index 100%
rename from test/fixtures/custom-collection/components/BasicComponent.vue
rename to test/fixtures/custom-compodium-dir/components/BasicComponent.vue
diff --git a/test/fixtures/custom-dir/nuxt.config.ts b/test/fixtures/custom-compodium-dir/nuxt.config.ts
similarity index 100%
rename from test/fixtures/custom-dir/nuxt.config.ts
rename to test/fixtures/custom-compodium-dir/nuxt.config.ts
diff --git a/test/fixtures/custom-collection/package.json b/test/fixtures/custom-compodium-dir/package.json
similarity index 100%
rename from test/fixtures/custom-collection/package.json
rename to test/fixtures/custom-compodium-dir/package.json
diff --git a/test/fixtures/custom-collection/my-ui/Button.vue b/test/fixtures/custom-compodium-dir/play/examples/BasicComponentExample.vue
similarity index 100%
rename from test/fixtures/custom-collection/my-ui/Button.vue
rename to test/fixtures/custom-compodium-dir/play/examples/BasicComponentExample.vue
diff --git a/test/fixtures/custom-dir/play/preview.vue b/test/fixtures/custom-compodium-dir/play/preview.vue
similarity index 100%
rename from test/fixtures/custom-dir/play/preview.vue
rename to test/fixtures/custom-compodium-dir/play/preview.vue
diff --git a/test/fixtures/custom-collection/app.vue b/test/fixtures/custom-component-dirs/app.vue
similarity index 100%
rename from test/fixtures/custom-collection/app.vue
rename to test/fixtures/custom-component-dirs/app.vue
diff --git a/test/fixtures/custom-collection/compodium/examples/BasicComponentExample.vue b/test/fixtures/custom-component-dirs/compodium/examples/BasicComponentExample.vue
similarity index 100%
rename from test/fixtures/custom-collection/compodium/examples/BasicComponentExample.vue
rename to test/fixtures/custom-component-dirs/compodium/examples/BasicComponentExample.vue
diff --git a/test/fixtures/custom-dir/components/TestBasic.vue b/test/fixtures/custom-component-dirs/components/BasicComponent.vue
similarity index 100%
rename from test/fixtures/custom-dir/components/TestBasic.vue
rename to test/fixtures/custom-component-dirs/components/BasicComponent.vue
diff --git a/test/fixtures/custom-component-dirs/my-ui/Button.vue b/test/fixtures/custom-component-dirs/my-ui/Button.vue
new file mode 100644
index 00000000..a154d08e
--- /dev/null
+++ b/test/fixtures/custom-component-dirs/my-ui/Button.vue
@@ -0,0 +1,3 @@
+<template>
+  <span />
+</template>
diff --git a/test/fixtures/custom-collection/nuxt.config.ts b/test/fixtures/custom-component-dirs/nuxt.config.ts
similarity index 100%
rename from test/fixtures/custom-collection/nuxt.config.ts
rename to test/fixtures/custom-component-dirs/nuxt.config.ts
diff --git a/test/fixtures/custom-dir/package.json b/test/fixtures/custom-component-dirs/package.json
similarity index 100%
rename from test/fixtures/custom-dir/package.json
rename to test/fixtures/custom-component-dirs/package.json

From 9f5cc6e63f446afb081e9e88f8538e8c13bf630b Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Wed, 5 Mar 2025 17:19:30 +0100
Subject: [PATCH 7/7] chore: up

---
 src/runtime/server/api/component-meta.get.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/runtime/server/api/component-meta.get.ts b/src/runtime/server/api/component-meta.get.ts
index 6344fbcf..914ce982 100644
--- a/src/runtime/server/api/component-meta.get.ts
+++ b/src/runtime/server/api/component-meta.get.ts
@@ -45,8 +45,7 @@ export default defineEventHandler(async (event) => {
             ...defaultProps,
             ...meta.compodium?.defaultProps
           }
-        },
-        srcMeta: meta
+        }
       }
     }
   } catch (err) {