Type errors in app.config.ts

[some-user123]

Environment

---

• Operating System: Windows_NT
• Node Version: v20.11.1
• Nuxt Version: 3.14.0
• CLI Version: 3.15.0
• Nitro Version: 2.10.2
• Package Manager: pnpm@9.11.0
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/ui@3.0.0-alpha.7

• Build Modules: -

Version

v3.0.0-alpha.7

Reproduction

https://github.com/some-user123/nuxt-ui-3-typeerrors

Description

After adding this app.config.ts to a plain project, type errors occur:

// app.config.ts
export default defineAppConfig({
    ui: {
        button: {
            slots: {
                base: 'font-normal'
            },
            variants: {
                size: {
                    lg: 'px-4 py-2',
                }
            },
            compoundVariants: [
                {
                    color: 'error',
                    variant: 'link',
                    class: 'text-lg'
                }
            ]
        },
        dropdownMenu: {
            variants: {
                active: {
                    false: 'data-highlighted:before:bg-red-500',
                }
            }
        }
    }
})

$ npx nuxi typecheck
app.config.ts:5:17 - error TS2322: Type 'string' is not assignable to type 'DeepPartial<string[], string>'.
  Type 'string' is not assignable to type '(string | undefined)[]'.

5                 base: 'font-normal'
                  ~~~~

app.config.ts:9:21 - error TS2322: Type 'string' is not assignable to type 'DeepPartial<{ base: string; leadingIcon: string; leadingAvatarSize: string; trailingIcon: string; }, string>'.
  Type 'string' is not assignable to type '{ [key: string]: string | TightMap<string>; }'.

9                     lg: 'px-4 py-2',
                      ~~

app.config.ts:12:13 - error TS2322: Type '{ color: "error"; variant: "link"; class: string; }[]' is not assignable to type 'DeepPartial<({ color: "primary"; variant: "solid"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: "secondary"; variant: "solid"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.
  Type '{ color: "error"; variant: "link"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap<string>; }'.
    Index signature for type 'string' is missing in type '{ color: "error"; variant: "link"; class: string; }[]'.

12             compoundVariants: [
               ~~~~~~~~~~~~~~~~

app.config.ts:23:21 - error TS2322: Type 'string' is not assignable to type 'DeepPartial<{ item: string[]; itemLeadingIcon: string[]; }, string>'.
  Type 'string' is not assignable to type '{ [key: string]: string | TightMap<string>; }'.

23                     false: 'data-highlighted:before:bg-red-500',
                       ~~~~~

Additional context

(There are actually more type errors, see #2532. Above errors occur in addition.)

Logs

No response

[benjamincanac]

There is indeed a type error about string[].

However, button.variants.size.lg and dropdownMenu.variants.active.false must be objects to target slots. Your config should look like this:

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'font-normal'
      },
      variants: {
        size: {
          lg: {
            base: 'px-4 py-2'
          }
        }
      },
      compoundVariants: [
        {
          color: 'error',
          variant: 'link',
          class: 'text-lg'
        }
      ]
    },
    dropdownMenu: {
      variants: {
        active: {
          false: {
            item: 'data-highlighted:before:bg-red-500'
          }
        }
      }
    }
  }
})

[some-user123]

Many thanks I've updated the reproduction to fix my errors 😳

[asanchez-sa]

Also add that when you try to change the theme from neutral it does not let you select items like Zinc or Slate,

Is there any way to customize the neutral color to something not on that list? For example, a hexadecimal color?