npm:v-inheritclasses

README

v-inheritClasses - Vue directive

Vue directive which binds class like $attrs to wrapped elements.

npm

✔ Installation

Get the package:

npm install v-inheritclasses

import Vue from 'vue'
import inheritClasses from 'v-inheritclasses'

Vue.use(inheritClasses)

👉 What problem does this feature trying to solve?

When you are using a wrapper component, you would expect that all regular HTML attributes are passed to the wrapped element. In Vue you can use inheritAttrs and v-bind="$attrs", but this option does not affect class and style bindings.

❌ PROBLEM

Using the component

<input-component class="card" placeholder="My input"/>

Component template

<template>
  <div>
    <label>My input</label>
    <input v-bind="$attrs">
  </div>
</template>

<script>
  export default {
    name: 'input-component'
  }
</script>

DOM

<div class="card">
  <label>My input</label>
  <input placeholder="My input"/>
</div>

✔️ Using v-inheritClasses

Directive	Value
v-inheritClasses	NO value - Inherit all classes
v-inheritClasses="['class1', 'class2']"	Inherit ONLY class1 and class2 - Array of strings
#### Using the component
```html

```
#### Component template
```html

#### DOM
```html
<div class="card marginClass paddingClass">
  <label class="card marginClass paddingClass">My input</label>
  <input class="paddingClass" placeholder="My input"/>
</div>

License

MIT

Usage no npm install needed!