vue-plugin-remove-attributes

A utility plugin for removing specific attributes and directives from Vue components abstract syntax trees (AST).

When applied as a NodeTransform in the Vue.js compiler, it removes the specified attributes and directives from the AST nodes of a Vue.js component during the compilation process.

This allows you to customize the component's AST to suit your project's needs.

Installation

# pnpm
pnpm add vue-plugin-remove-attributes

# bun
bun install vue-plugin-remove-attributes

# npm
npm install vue-plugin-remove-attributes

# yarn
yarn add vue-plugin-remove-attributes

Usage:

In your vite.config.ts, add it to your nodeTransforms

import createAttributesRemover from "vue-plugin-remove-attributes"

export default defineConfig({
    plugins: [vue({
        template: {
            compilerOptions: {
                nodeTransforms: [
                    // here add all attributes that you want to remove
                    createAttributesRemover([<attributes>]),
                ],
            },
        },
    })],
})

Practical Example:

Let's say you want to remove all data-test attributes in production.

You use them only in unit-tests and e2e tests and don't want to clutter the production build.

You could do something like this:

   // other code

    nodeTransforms: [
      ...(process.env.NODE_ENV === 'production' ? [createAttributesRemover(['data-test'])] : [])
    ]

   // other code

License

MIT License © 2023-PRESENT Mihai Plamadeala