remove-attr

Vite Plugin - Remove Attributes

This Vite plugin is specifically designed for Vue.js projects. It allows the removal of specified attributes in production builds, supporting a variety of options like file extensions, attributes, ignored folders, and files.

Table of Contents

• Features
• Installation
• Usage
  • Prerequisites
  • Examples
• License

Features

• Removes specified attributes in production builds of Vue.js projects.
• Allows you to specify the file extensions to be considered.
• Can ignore certain folders or files based on configuration.
• Ensures clean production code by removing unnecessary attributes, like 'data-testid' used in testing.

Installation

You can install this plugin through npm:

npm install --save-dev remove-attr

Usage

Prerequisites

To use this plugin, you need to have a Vite project set up. Import and use the plugin in your vite.config.js or vite.config.ts file.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import removeAttr from 'remove-attr'

export default defineConfig({
    plugins: [
        vue(),
        removeAttr({
            extensions: [ 'vue' ],
            attributes: [ 'data-testid' ]
        })
    ]
})

Examples

Example 1: Removing 'data-testid' attributes from '.vue' files

This configuration will remove 'data-testid' attributes from all '.vue' files in the production build.

export default defineConfig({
    plugins: [
        vue(),
        removeAttr({
            extensions: [ 'vue' ],
            attributes: [ 'data-testid' ]
        })
    ]
})

Example 2: Ignoring specific folders and files

This configuration will remove 'data-testid' and 'data-id' attributes from all '.vue', '.ts', and '.js' files, with the exception of those in the 'src/tests' and 'src/utilities' folders, as well as the 'Home.vue', 'src/components/Modal.vue', and 'src/layouts/LayoutAuth.vue' files.

export default defineConfig({
    plugins: [
        vue(),
        removeAttr({
            extensions: [ 'vue', "ts", "ts" ],
            attributes: [ 'data-testid', "data-id" ],
            ignoreFolders: [ 'src/tests', "src/utilities" ],
            ignoreFiles: [ 'Home.vue', 'src/components/Modal.vue', "src/layouts/LayoutAuth.vue" ]
        })
    ]
})

License