vue-remove-attributes

1.0.3 verified Fri May 01 auth: no javascript

vue-remove-attributes 1.0.3 is a Vue template compiler module that removes unwanted attributes (e.g., data-testid) from Vue single-file component templates at build time. It integrates with vue-loader via compilerOptions and supports matching attributes by string, array, or regex. Heavily dependent on vue-template-compiler (or @vue/compiler-sfc for Vue 3), it is best suited for Vue 2 projects using Webpack, similar to babel-plugin-jsx-remove-data-test-id but for Vue templates. Currently stable with low release cadence and limited community adoption.

Common errors

error TypeError: createAttributeRemover is not a function ↓

cause Named import instead of default import.

fix

Use default import: import createAttributeRemover from 'vue-remove-attributes' or const createAttributeRemover = require('vue-remove-attributes').

error Cannot read property 'compilerOptions' of undefined ↓

cause Misconfiguration of vue-loader options.

fix

Ensure you are passing options to vue-loader: { loader: 'vue-loader', options: { compilerOptions: { modules: [...] } } }.

error Module not found: Can't resolve 'vue-template-compiler' ↓

cause Missing peer dependency.

fix

Install vue-template-compiler as a dev dependency: npm install -D vue-template-compiler.

Warnings

gotcha Attributes like :data-testid and v-bind:data-testid are treated as separate from data-testid; they will not be removed unless explicitly matched. ↓

fix Use an array or regex that matches all permutations: createAttributeRemover(['data-testid', ':data-testid', 'v-bind:data-testid']) or a regex like /^:?v-bind:?data-testid$/.

deprecated The package depends on vue-template-compiler which is deprecated for Vue 3 in favor of @vue/compiler-sfc. ↓

fix For Vue 3, use @vue/compiler-sfc's compileTemplate option or migrate to a different solution like babel-plugin-jsx-remove-data-test-id for JSX templates.

breaking Version 1.0.0 dropped support for Node.js < 10. ↓

fix Use Node.js 10 or higher.

Install

npm install vue-remove-attributes

yarn add vue-remove-attributes

pnpm add vue-remove-attributes

Imports

default (createAttributeRemover)

wrong

import { createAttributeRemover } from 'vue-remove-attributes'

correct

import createAttributeRemover from 'vue-remove-attributes'

The package exports a single default function; named import will be undefined.

default (CommonJS)

wrong

const { createAttributeRemover } = require('vue-remove-attributes')

correct

const createAttributeRemover = require('vue-remove-attributes')

CommonJS require returns the default export directly, not an object.

TypeScript type

wrong

import { CreateAttributeRemover } from 'vue-remove-attributes'

correct

import type CreateAttributeRemover from 'vue-remove-attributes'

The package does not export a named type; use import type for the default export.

Quickstart

Shows how to require the module and configure vue-loader to remove 'data-testid' attributes from all components.

// webpack.config.js
const createAttributeRemover = require('vue-remove-attributes');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              modules: [
                createAttributeRemover('data-testid')
              ]
            }
          }
        }
      }
    ]
  }
};