title: Allow Data Attributes with Strict Templates impact: MEDIUM impactDescription: fixes data-testid and data-* attribute errors in strict mode type: capability

tags: dataAttributes, vueCompilerOptions, strictTemplates, data-testid, testing

Allow Data Attributes with Strict Templates

Impact: MEDIUM - fixes data-testid and data-* attribute errors in strict mode

With strictTemplates enabled, data-* attributes on components cause type errors. Use the dataAttributes option to allow specific patterns.

Problem

<template>
  <!-- Error: Property 'data-testid' does not exist on type... -->
  <MyComponent data-testid="submit-button" />

  <!-- Error: Property 'data-cy' does not exist on type... -->
  <MyComponent data-cy="login-form" />
</template>

Solution

Configure dataAttributes to allow specific patterns:

// tsconfig.json or tsconfig.app.json
{
  "vueCompilerOptions": {
    "strictTemplates": true,
    "dataAttributes": ["data-*"]
  }
}

Now all data-* attributes are allowed on any component.

Specific Patterns

You can be more selective:

{
  "vueCompilerOptions": {
    "dataAttributes": [
      "data-testid",
      "data-cy",
      "data-test-*"
    ]
  }
}

This only allows the specified patterns, not all data attributes.

Common Testing Attributes

For testing libraries, allow their specific attributes:

Library	Attribute	Pattern
Testing Library	`data-testid`	`"data-testid"`
Cypress	`data-cy`	`"data-cy"`
Playwright	`data-testid`	`"data-testid"`
Generic	All data attributes	`"data-*"`

Reference

Vue Language Tools Wiki - Vue Compiler Options

data-attributes-config.md 1.9 KB Пермалинк Историја Датотека