v-inheritclasses v1.0.1

v-inheritClasses - Vue directive

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

✔ 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

Using the component

<input-component class="marginClass" :class="classes" placeholder="My input"/>

Component template

<template>
  <div>
    <label v-inheritClasses>My input</label>
    <input v-bind="$attrs" v-inheritClasses="['paddingClass']">
  </div>
</template>

<script>
  export default {
    name: 'input-component',
    data() {
        return {
            classes: {
                card: true,
                paddingClass: true
            }
        }
    }
  }
</script>

DOM

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

License

MIT