fix(templates): dont override AppConfig type

src/runtime/components/Badge.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
 import type { LinkProps } from '#ui/components/Link.vue'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
 
 const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
 

src/runtime/components/Button.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from '#ui/components/Link.vue'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
 
 const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
 

src/runtime/components/Collapsible.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/collapsible'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
 
 const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
 

src/runtime/components/Container.vue

@@ -1,7 +1,10 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/container'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
 
 const container = tv({ extend: tv(theme), ...(appConfig.ui?.container || {}) })
 

src/runtime/components/Tooltip.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps } from 'radix-vue'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
 
 const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
 

src/templates.ts

@@ -66,31 +66,22 @@ export default function createTemplates (options: ModuleOptions, nuxt: Nuxt) {
         [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object }
       }>
 
-      type AppConfigUI = {
+      const colors = ${JSON.stringify(options.colors)} as const;
-        primary: string
-        gray: string
-      } & typeof ui
 
-      type AppConfigInputUI = {
+      type UI = {
-        primary?: string
+        primary?: typeof colors[number]
-        gray?: string
+        gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone'
         [key: string]: any
       } & DeepPartial<typeof ui>
 
       declare module 'nuxt/schema' {
-        interface AppConfig {
-          ui: AppConfigUI
-        }
         interface AppConfigInput {
-          ui?: AppConfigInputUI
+          ui?: UI
         }
       }
       declare module '@nuxt/schema' {
-        interface AppConfig {
-          ui: AppConfigUI
-        }
         interface AppConfigInput {
-          ui?: AppConfigInputUI
+          ui?: UI
         }
       }
       export {}