can't use onFocus with nuxt/ui when enabled strictTemplates

[baixiaoyu2997]

Vue - Official extension or vue-tsc version

Vue (Official)

VSCode version

cursor 1.1.3 (vscode version: 1.96.2)

Vue version

3.5.16

TypeScript version

5.8.3

System Info

System:
    OS: macOS 15.5
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 890.01 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - /usr/local/opt/node@22/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.9.2 - /usr/local/opt/node@22/bin/npm
    pnpm: 10.11.0 - ~/Library/pnpm/pnpm
    bun: 1.1.34 - ~/.bun/bin/bun

package.json dependencies

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "ROLLDOWN_OPTIONS_VALIDATION=loose nuxt generate",
    "dev": "nuxt dev",
    "preview": "npx serve ./dist ",
    "postinstall": "nuxt prepare",
    "lint": "pnpm -r --parallel exec eslint --cache .",
    "format": "prettier --write .",
    "typecheck": "npx nuxi typecheck",
    "clean": "rm -rf .nuxt .output",
    "clean:modules": "pnpm -r exec rm -rf node_modules",
    "reinstall": "pnpm clean:modules && rm pnpm-lock.yaml && pnpm i",
    "sb": "cross-env NODE_OPTIONS='--no-experimental-require-module' STORYBOOK_MODE=true nuxt dev",
    "storybook_comment": "run nuxt dev first, bc need nuxt dev server, then go to localhost:6006",
    "build-storybook": "storybook build",
    "generate-api": "npx swagger-typescript-api generate -p http://10.1.1.111/api/openapi -o ./app/apis/generate --extract-request-body --extract-response-body --route-types --modular",
    "test": "vitest -c ./layers/vitest/vitest.config.ts"
  },
  "dependencies": {
    "@nuxt/eslint": "1.4.1",
    "@nuxt/image": "^1.10.0",
    "@nuxt/scripts": "^0.11.8",
    "@pinia/nuxt": "^0.11.1",
    "@unhead/vue": "^2.0.10",
    "@vueuse/core": "^13.3.0",
    "@vueuse/nuxt": "^13.3.0",
    "@zb/chart": "workspace:*",
    "@zb/i18n": "workspace:*",
    "@zb/storybook": "workspace:*",
    "@zb/test": "workspace:*",
    "@zb/ui": "workspace:*",
    "big.js": "^7.0.1",
    "dayjs": "^1.11.13",
    "defu": "^6.1.4",
    "eslint": "9.29.0",
    "gridstack": "^12.2.1",
    "nuxt": "^3.17.5",
    "pinia": "^3.0.3",
    "vite": "npm:rolldown-vite@^7.0.0-alpha.0",
    "tailwind-merge": "^3.3.1",
    "valibot": "^1.1.0",
    "vue": "^3.5.16"
  },
  "devDependencies": {
    "@types/big.js": "^6.2.2",
    "@types/node": "^22",
    "@vue-macros/nuxt": "^3.0.0-beta.14",
    "cross-env": "^7.0.3",
    "eslint-plugin-unused-imports": "^4.1.4",
    "prettier": "3.5.3",
    "swagger-typescript-api": "^13.2.3",
    "typescript": "^5.8.3",
    "vue-component-type-helpers": "^2.2.10",
    "vue-tsc": "^2.2.10"
  },
  "pnpm": {
    "overrides": {
      "vite": "npm:rolldown-vite@^7.0.0-alpha.0"
    }
  }
}

Steps to reproduce

enabled strictTemplates in tsconfig

then, use input component from nuxt/ui:

 <UInput
          :modelValue="state.size"
          size="lg"
          @focus="onSizeInputFocus"
          v-bind="{ onFocus: onSizeInputFocus,id:123 }"
          @update:model-value="onSizeInputChange"
        >
          <template #trailing>
            <USelect v-model="state.sizeToken" variant="none" :items="[contractToken]" />
          </template>
        </UInput>

@Focus will trigger error

but v-bind will not

What is expected?

do not show error on @Focus

What is actually happening?

show error on input component

Link to minimal reproduction

http://you-dont-need.com

Any additional comments?

volar v3.0.0-beta.2

[KazariEX]

This feature needs to be used in conjunction with fallthroughAttributes.

Meanwhile, if the component library is exported in compiled dts format, the component library needs to enable fallthroughAttributes during compilation.

[baixiaoyu2997]

启用了：

"vueCompilerOptions": {
    "strictTemplates": true,
    "fallthroughAttributes": true
  }

我尝试使用typecheck来排除编辑器的影响，发现还是有这个问题：

[KazariEX]

This is currently a limitation because the root node of the component is Primitive, and the as attribute is used to dynamically specify the root tag. In this case, we cannot infer the fallthrough attributes of the component.

[KazariEX]

Workaround:

import type { HTMLAttributes } from "vue";

declare module "vue" {
    interface ComponentCustomProps extends HTMLAttributes {}
}

[baixiaoyu2997]

yeah, but will trigger other error 🥲

[RayGuo-ergou]

I think it because both nuxt ui and HTMLAttributes define the submit event, and the one from nuxt ui library is override by HTMLAttributes. Try to extends the type that Omit the duplicate attrs might help.

My recommendation would be just disable strictTemplate if using an ui lib depends on radix/reka, they just don't work well as element type is dynamic.

correct me if im wrong, it might be resolvable if we can refer the component type based on the as prop type here: https://github.com/unovue/reka-ui/blob/v2/packages/core/src/Primitive/Primitive.ts#L5, but anyway that should be done on radix/reka side.