nuxt / nuxt/ui

`fieldGroup` theme is missing `defaultVariants`, causing a TypeScript error when setting it in app.config.ts

Open Beginner friendly
#6,936 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Environment
  • Operating System: macOS 25.6.0
  • CPU: Apple M1 (8 cores)
  • Node Version: v26.2.0
  • Nuxt Version: 4.5.2
  • CLI Version: 3.37.0
  • Nitro Version: 2.13.4
  • Package Manager: pnpm@12.3.4
  • Builder: vite 8.3.0
  • User Config: compatibilityDate, css, devtools, eslint, modules, routeRules
  • Runtime Modules: @nuxt/eslint 1.17.0, @nuxt/ui 4.11.1, @nuxt/a11y 1.0.0-alpha.1, @nuxt/hints 1.1.4, @nuxt/image 2.1.0, @nuxt/test-utils 4.3.2, @formkit/auto-animate/nuxt 0.10.0, nuxt-anime 0.1.13, @nuxtjs/sitemap 8.5.1, @nuxtjs/robots 6.2.2, @scalar/nuxt 0.6.67
  • Build Modules: -
Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.11.1

Reproduction

https://codesandbox.io/p/sandbox/goofy-thompson-yw5fqr

Description

The fieldGroup theme is missing a defaultVariants key, unlike other components with the same variants structure (e.g. fileUpload, which defines defaultVariants: { color: 'primary', variant: 'area', size: 'md' }).

Because FieldGroupProps and AppConfig.ui.fieldGroup are both derived via ComponentConfig<typeof theme, AppConfig, 'fieldGroup'>, the missing key means TypeScript rejects setting defaultVariants for fieldGroup in app.config.ts, even though this is functionally identical to other components and tv() fully supports it.

Confirmed via a local patch that adding defaultVariants to the field-group theme resolves the type error with no other side effects:

defaultVariants: {
size: "md",
orientation: "horizontal"
}

Happy to submit a PR with this fix.

Additional context

No response

Logs

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the fieldGroup theme and compare its variants structure with fileUpload, then inspect how FieldGroupProps and AppConfig.ui.fieldGroup are derived for app.config.ts. Add the missing defaultVariants definition and verify that setting it in app.config.ts no longer produces the TypeScript error, using the provided reproduction to confirm behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.