Skip to content

vitest 4 - Vue v-model can only be used on input, textarea and select elements with Web Components #9270

@robin-ln

Description

@robin-ln

Describe the bug

When running Vitest with the --coverage option, a runtime error is thrown when using Vue v-model bindings on Web Components.

Expected behavior:

  • Using v-model on Web Components should not throw an error when running tests with coverage enabled.

Reproduction

This happens in a Vue project configured with the Vite Vue plugin, where custom elements are declared using compilerOptions.isCustomElement.
The issue occurs regardless of the coverage provider:

  • coverage.provider = "istanbul"

  • coverage.provider = "v8"

  • vite configuration

vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('ux-'),
    },
  },
})
  • console error :
SyntaxError: v-model can only be used on <input>, <textarea> and <select> elements.
38 |                <ux-XXX
39 |                  v-model="model"
   |                   ^

System Info

System:
    OS: Linux 6.14 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
    CPU: (6) x64 AMD Ryzen 5 4500U with Radeon Graphics
    Memory: 22.69 GB / 30.76 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.21.0 - .nvm/versions/node/v22.21.0/bin/node
    npm: 10.9.4 - .nvm/versions/node/v22.21.0/bin/npm
    pnpm: 10.19.0 - .nvm/versions/node/v22.21.0/bin/pnpm
  Browsers:
    Chrome: 143.0.7499.40
  npmPackages:
    @vitejs/plugin-vue: ^6.0.2 => 6.0.2 
    @vitest/coverage-istanbul: ^4.0.15 => 4.0.15 
    vite: ^7.2.7 => 7.2.7 
    vitest: ^4.0.15 => 4.0.15

Used Package Manager

npm

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions