Skip to content

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

Open
@baixiaoyu2997

Description

@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

Image

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions