Package Exports

vue-remove-attributes

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-remove-attributes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-remove-attributes

A vue-template-compiler module that removes unwanted attributes from templates. Neat!

Installation & Usage

Install:

npm install -D vue-remove-attributes

Use:

Import and add to your webpack configuration:

ES Module:

import createAttributeRemover from 'vue-remove-attributes';

CommonJS:

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

Pass the module to vue-loader in your webpack config:

module: {
  rules: [{
    test: /\.vue$/,
    use: {
      loader: 'vue-loader',
      options: {
        compilerOptions: {
          modules: [
            createAttributeRemover('data-testid')
          ]
        }
      }
    }
  }]
}

Voilà! Your vue templates, littered with unwanted attributes (for tests, etc):

<template>
  <ul class="list" data-testid="test-list">
    <li
      class="list-item"
      v-for="n in 3"
      data-testid="test-item"
    >
      {{ n }}
    </li>
  </ul>
</template>

Now beautiful for production:

<ul class="list">
  <li class="list-item"> 1 </li>
  <li class="list-item"> 2 </li>
  <li class="list-item"> 3 </li>
</ul>

Saving us entire bytes over the wire. 🚀

API:

`createAttributeRemover(matcher)`

Returns a vue-template-compiler module.

matcher - Criteria to match attributes against. Can be one of the following types:
- string - createAttributeRemover('data-testid') will remove data-testid
- string[] - createAttributeRemover(['data-foo', 'data-bar']) will remove data-foo and data-bar
- RegExp - createAttributeRemover(/^:?data-testid$/) will remove data-testid and :data-testid

Note: The module will match attributes as their raw values in Vue templates, not their compiled result. As such, data-testid, :data-testid, and v-bind:data-testid are all treated as separate attributes, even though they render identically. Specify each permutation explicitly for a comprehensive removal experience, e.g. createAttributeRemover(['data-testid', ':data-testid', 'v-bind:data-testid']).

License

MIT