Installation

yarn add vue-classnames
# or
npm i vue-classnames

Activation

There are two ways of activating this package: globally and locally. If you want to use it on a single component, it would be a good idea to go with the local method:

import { mixin as classNamesMixin } from 'vue-classnames';

Vue.component('my-component', {
  mixins: [classNamesMixin],
});

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

To activate it globally, just use this package as Vue plugin, like so:

import VueClassNames from 'vue-classnames';

Vue.use(VueClassNames);

Usage

API

vm.$classNames(defaultClassName = null)

Returns an array of the class names, otherwise defaultClassName.

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:

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'],
     },
  },
};