Cranberry / Vue BEM

Install

npm install @cran/vue.bem

Usage

Note on modifiers

Modifiers may be a string, an object where falsy values are ignored and keys represent the created modifiers, or an array (possibly deeply nested) of the same content. The following are all valid, and for the rest of the readme, you may assume any of the following can replace the string "modifiers"

const stringModifier = "modifier";

const objectModifier = {
  modifier: true,
  noModifier: false,
  truthyValue: 1,
  falsyValue: "",
};

const mixedModifier = [ stringModifier, objectModifier, ];

TL;DR

All of the following are equivalent

bem(b, e, m);
b(b).em(e, m);
b(b).e(e).m(m);

Primary

bem("block");
// > [ 'block' ]
bem("block", "element");
// > [ 'block__element' ]
bem("block", "element", "modifiers");
// > [ 'block__element', 'block__element--modifiers' ]

Composition

const b = bem.b("block");
// > { em, m, e };
b.em();
// > [ 'block' ]
b.em("element");
// > [ 'block__element' ]
b.em(undefined, "modifiers");
// > [ 'block', 'block--modifiers' ]
b.m("modifiers");
// > [ 'block', 'block--modifiers' ]
const e = b.e("element");
// > { m }
e.m();
// > [ 'block__element' ]
e.m("modifiers");
// > [ 'block__element', 'block__element--modifiers' ]