Environment

• Operating System: Linux
• Node Version: v20.12.0
• Nuxt Version: 4.1.2
• CLI Version: 3.28.0
• Nitro Version: 2.12.6
• Package Manager: pnpm@8.15.6
• Builder: -
• User Config: modules, devtools, compatibilityDate, future, css, typescript
• Runtime Modules: @nuxt/ui@3.3.3
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v3.x

Version

v3.3.3

Reproduction

https://codesandbox.io/p/devbox/flamboyant-julien-6zwsvc

npx nuxt typecheck should be executed automatically.

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      vueCompilerOptions: {
        strictTemplates: true,
      },
    },
  },
});

<!-- pages/index.vue -->
<template>
  <div class="flex flex-col items-center justify-center gap-4 h-screen">
    <h1 class="font-bold text-2xl text-(--ui-primary)">
      Nuxt UI v3 - Playground
    </h1>

    <div class="flex items-center gap-2">
      <UInput model-value="Test value" readonly />
    </div>
  </div>
</template>

Description

Passing for example readonly parameter to UInput works at runtime and does not emit any type errors with strictTemplates turned off, but with it turned on it throws a type error, saying that readonly cannot be passed to UInput:

app/pages/index.vue:8:40 - error TS2353: Object literal may only specify known properties, and 'readonly' does not exist in type '{ readonly onBlur?: ((event: FocusEvent) => any) | undefined; readonly onChange?: ((event: Event) => any) | undefined; readonly "onUpdate:modelValue"?: ((value: "Test value") => any) | undefined; ... 26 more ...; loadingIcon?: string | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.

8       <UInput model-value="Test value" readonly />
                                         ~~~~~~~~

Additional context

No response

Logs