Vue BEM Plugin
BEM is a great way to namespace DOM elements.
If you're like me, however, you can't stand manually writing __
and --
over
and over again.
"Todo__list__item Todo__list__item--completed"
No thanks!
Following Vue's many pleasant declarative template patterns, use this mixin to name your blocks, elements, and modifiers in a more declarative style. Let the mixin take care of implementing dashes and low-dashes alike.
API
The public interface for the mixin is a function called bem
.
The block of the component is defined by the name
property on the Vue
component.
Given a component:
<script>export default { name: "Calculator", data() { return { atZero: true, ... }; },};</script>
Blocks
Vue
<div :class="bem.block">...</div>
HTML
...
Elements : String | [String]
element
Vue
<div :class="bem({ element: 'screen' })">...</div>
HTML
...
elements
Vue
<div :class="bem({ elements: ['screen', 'number'] })">...</div>
HTML
...
Modifiers : { String: Bool }
Vue
<div :class="bem({ modifiers: { atZero } })">...</div>
HTML
...
All together
Vue
<div :class="bem.block"> <div :class=" bem({ elements: ['screen', 'number'], modifiers: { atZero, disabled: false, success: true } }) " > ... </div></div>
HTML
...
Configuration
To make the bem
function globally available to all Vue components:
- Plugin (recommended):
Vue
- Global mixin (use with caution):
Vue
Alternatively, import the mixin on a per-component basis:
<script>import { bemMixin } from "vue-bem-plugin" export default { name: "Calculator", mixins: [bemMixin],}</script>
Local Development
- Clone the directory
npm install && npm test
Ramda Golf
If you check out the source code, you'll see a lot of utility functions imported from the Ramda library. I wanted to have some fun and stitch together as much library code as possible. If some of the code seems gratuitously abstract or needlessly clever, you are not wrong 😇.
Tools
Contributing
Interested in expanding or improving the API?
-
Reach out to me and say hello! I'd love to hear about what you're interested in.
-
Once we've confirmed what you can work on, fork this repo and work on your masterpiece.
-
Once your work is done, squash your work to a single commit, and open a PR from your feature branch to this repo's master branch.