V class name

Vue component CSS class name helper

Version: 1.0.8 Updated: 03/14/2018

By: nakajmg License: MIT

Downloads Last 30 Days: 62

Install

npm i v-class-name
yarn add v-class-name

Repository: https://github.com/nakajmg/v-class-name

CDNs

bundle.run: https://bundle.run/v-class-name

jsDelivr: https://cdn.jsdelivr.net/npm/v-class-name

unpkg: https://unpkg.com/v-class-name

vue-class-name

Add CSS class name which based on name property.

import vueClassName from 'v-class-name'
Vue.use(vueClassName)
<template>
  <div v-class-name>
    <h1 v-class-name="'_Heading'">
      heading
    </h1>
    <div v-class-name="'_Content'">
      content
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

👇

<div class="MyComponent">
  <h1 class="MyComponent_Heading">
    heading
  </h1>
  <div class="MyComponent_Content">
    content
  </div>
</div>
Categories: Vue js
Tags: vue