A vue-template-compiler module that removes unwanted attributes from templates.
npm install vue-remove-attributesA vue-template-compiler module that removes unwanted attributes from templates. Neat!
npm install -D vue-remove-attributes
`$3
Import and add to your webpack configuration:ES Module:
`javascript
import createAttributeRemover from 'vue-remove-attributes';
`
CommonJS:
`javascript
const createAttributeRemover = require('vue-remove-attributes');
`Pass the module to
vue-loader in your webpack config:
`javascript
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):
`html
class="list-item"
v-for="n in 3"
data-testid="test-item"
>
{{ n }}
`
Now beautiful for production:
`html
- 1
- 2
- 3
`
Saving us _entire bytes_ over the wire. :rocket:$3
#### 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-testidNote: 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'])`.