Unable to pass native HTML element parameters when `strictTemplates` is `true`

[rijenkii]

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.

Code for historical purposes

Relevant parts of Nuxt config:

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

Code:

<!-- 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

[rijenkii]

You probably know this already, but I will comment anyway just in case.

You can add native props to the components by intersecting your custom props with /** @vue-ignore */ import("vue").InputHTMLAttributes (or extending the interface with custom props from that ignored type).

Example (on stackblitz because I like it more than codesandbox).

Code for historical purposes

Relevant parts of typescript config:

{
  "vueCompilerOptions": {
    // Forbid unknown props
    "strictTemplates": true,
    // Allow unknown props that start with `data-`
    "dataAttributes": ["data-*"]
  }
}

Code:

<!-- UInput.vue -->
<script setup lang="ts" generic="T">
defineProps<
  {
    modelValue?: T;
    defaultValue?: T;
  } & /** @vue-ignore */ import("vue").InputHTMLAttributes
>();
</script>

<template>
  <pre>{{ { $attrs, $props } }}</pre>
</template>

<!-- App.vue -->
<script setup lang="ts">
import UInput from "./UInput.vue";
</script>

<template>
  <UInput
    type="text"
    model-value="hello, world"
    default-value="test"
    data-test="hi"
    aria-checked="true"
  />
</template>

Rendered page:

{
  "$attrs": {
    "type": "text",
    "data-test": "hi",
    "aria-checked": "true"
  },
  "$props": {
    "modelValue": "hello, world",
    "defaultValue": "test"
  }
}

The only hitch is that parameters from InputHTMLAttributes are not actually exposed as props in the component: they are instead exposed as $attrs, but typescript thinks they are props, so you'll have to be careful with that. Afaik there is no way to type just $attrs.