chore: setup compodium in playground

playground/compodium/examples/UButtonExample.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    label: 'Click me!'
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>

playground/compodium/examples/UButtonExampleAvatar.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'size'],
+  defaultProps: {
+    avatar: { src: 'https://github.com/benjamincanac.png' }
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>

playground/compodium/examples/UButtonExampleDisabled.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    label: 'Click me!',
+    disabled: true
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>

playground/compodium/examples/UButtonExampleIcon.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'size'],
+  defaultProps: {
+    label: 'Click me!',
+    icon: 'i-lucide-rocket'
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>

playground/compodium/examples/UButtonExampleLoading.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'size'],
+  defaultProps: {
+    label: 'Click me!',
+    loading: true
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>

playground/compodium/examples/UButtonExampleSizes.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'size'],
+  defaultProps: {
+    label: 'Click me!',
+    disabled: true
+  }
+})
+</script>
+
+<template>
+  <UButton v-bind="$attrs" />
+</template>

playground/nuxt.config.ts

@@ -1,9 +1,5 @@
 export default defineNuxtConfig({
-  modules: [
-    '../src/module',
-    '@nuxthub/core'
-  ],
-
+  modules: ['../src/module', '@nuxthub/core', '@compodium/nuxt'],
   devtools: {
     enabled: true
   },
@@ -21,5 +17,14 @@ export default defineNuxtConfig({
       // prevents reloading page when navigating between components
       include: ['@internationalized/date', '@vueuse/shared', '@vueuse/integrations/useFuse', '@tanstack/vue-table', 'reka-ui', 'reka-ui/namespaced', 'embla-carousel-vue', 'embla-carousel-autoplay', 'embla-carousel-auto-scroll', 'embla-carousel-auto-height', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-wheel-gestures', 'colortranslator', 'tailwindcss/colors', 'tailwind-variants', 'ufo', 'zod', 'vaul-vue']
     }
+  },
+
+  compodium: {
+    includeLibraryCollections: false,
+    extras: {
+      colors: {
+        neutral: 'slate'
+      }
+    }
   }
 })

playground/package.json

@@ -8,6 +8,7 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
+    "@compodium/nuxt": "0.1.0-beta.7",
     "@iconify-json/lucide": "^1.2.32",
     "@iconify-json/simple-icons": "^1.2.29",
     "@nuxt/ui": "latest",