$3

// or SFC
export default {
mixins: [classNamesMixin],
};
`

To activate it globally, just use this package as Vue plugin, like so:
`js
import VueClassNames from 'vue-classnames';

Vue.use(VueClassNames);
`

Usage

<template>
  <div :class="$classNames()">
      <h1><slot /></h1>
  </div>
</template>

<template>
  <section>
      <Heading large padded>SFC demo</Heading>
      <!-- or simply -->
      <Heading big>SFC demo</Heading>
  </section>
</template>

<section>
  <div class="relaxed large">
    <h1>SFC demo</h1>
  </div>
</section>


#### className
* If true, then prop name will be also name of the class.
* If value is a string, then it will be name of the class.
* If value is a function then it will be executed with following object as argument { name, value, props },
where name and value are current prop name and value, and props contains all props passed to the component.
* If value is array, then each element is treated as a single className.

##### NOTE:
If className is a function or an array,
then both function output and each array element will be processed as a single className, which means that all above rules apply to them.

##### EXAMPLE:
`js
export default {
props: {
test1: {
// $classNames will return ['test1'] if otherProp is truthy.
className: ({ props }) => !!props.otherProp,
},
test2: {
// $classNames will return ['better-class'] if someOtherProp is truthy.
className: ({ props }) => !!props.someOtherProp && 'better-class',
},
test3: {
// $classNames will return ['btn', 'btn-blue'] if blue is truthy.
className: ({ props }) => !!props.blue && ['btn', 'btn-blue'],
},
test4: {
// $classNames will return ['test4'] if this prop value is some-value.
className: ({ name, value }) => (value === 'some-value' && name),
},
test5: {
// $classNames will return ['btn', 'btn-large', 'btn-relaxed'] if padded is truthy,
// otherwise it will return ['btn', 'btn-large'].
className: ['btn', 'btn-large', ({ props }) => !!props.padded && 'btn-relaxed'],
},
},
};
``