BEM is a great way to namespace DOM elements

Overview

Build Status

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

...
">
<div class="Calculator">...div>

Elements : String | [String]

  • element

Vue

...
">
<div :class="bem({ element: 'screen' })">...div>

HTML

...
">
<div class="Calculator__screen">...div>
  • elements

Vue

...
">
<div :class="bem({ elements: ['screen', 'number'] })">...div>

HTML

...
">
<div class="Calculator__screen__number">...div>

Modifiers : { String: Bool }

Vue

...
">
<div :class="bem({ modifiers: { atZero } })">...div>

HTML

...
">
<div class="Calculator Calculator--atZero">...div>

All together

Vue

...
">
<div :class="bem.block">
  <div :class="
      bem({
        elements: ['screen', 'number'],
        modifiers: { atZero, disabled: false, success: true }
      })
    "
  >
    ...
  div>
div>

HTML

...
">
<div class="Calculator">
  <div
    class="Calculator__screen__number Calculator__screen__number--atZero Calculator__screen__number--success"
  >
    ...
  div>
div>

Configuration

To make the bem function globally available to all Vue components:

h(App), }).$mount("#app")">
import Vue from "vue"
import App from "./App.vue"
import { bemPlugin } from "vue-bem-plugin"

Vue.use(bemPlugin)

new Vue({
  render: h => h(App),
}).$mount("#app")
h(App), }).$mount("#app")">
import Vue from "vue"
import App from "./App.vue"
import { bemMixin } from "vue-bem-plugin"

Vue.mixin(bemMixin)

new Vue({
  render: h => h(App),
}).$mount("#app")

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

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?

  1. Reach out to me and say hello! I'd love to hear about what you're interested in.

  2. Once we've confirmed what you can work on, fork this repo and work on your masterpiece.

  3. 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.

You might also like...
Vue.js 2.x directive to set a default value for editable elements with no affect to the model state

vue-default-value A Vue.js Directive to set a default value for editable elements with no affect to the model state. Installation Via NPM Install the

Vue plugin to match the height of elements

vue-match-heights Quick and easy method of setting element heights to be the same. You can provide an array of selectors that will be calculated in se

๐Ÿ’ Pick out specific elements from the component slot
๐Ÿ’ Pick out specific elements from the component slot

๐Ÿ’ Pick out specific elements from the component slot

MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS
MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS

MKTemplate A beautiful UI . Start your Web Site with this bootstrap and VueJS UI . MKTemplate is Free and Open Source. It features multiple HTML and V

Vue Visibility ๐Ÿ‘€ Hides or shows elements depending of a criteria

Vue plugin that hides or shows elements depending of a criteria. ๐Ÿ‘€

Directive to be able to attach events through other events on HTML elements in VueJS

vue-attach-event Directive to be able to attach events through other events on HTML elements in VueJS Install NPM: npm i --save vue-attach-event Requi

A Vue.js directive helps track visible elements.

vue-visibility-track A Vue.js directive helps track elements's visibility. Installing Using npm: npm install --save vue-visibility-track Using yarn: y

Easy way to do seo with vue

vue-seo Full Documentation Aim The aim of this Vue plugin is to help you indexing your Vue powered website using all the greatness of Vue. We also wan

A platform collecting facts --data and evidence-- and presenting them AS IT IS in the useful way. No prejudice!
A platform collecting facts --data and evidence-- and presenting them AS IT IS in the useful way. No prejudice!

FactFinder.app @factfinderbot " Only Facts We Trust, No Prejudice! " Live (Release): https://factfinder.app Preview (Dev): https://fact-finder.vercel.

Owner
Mike Schutte
learner, runner, make everything funner. black lives matter. he/him.
Mike Schutte
A Vue.js 2 component to clone DOM elements

vue-cloneya A vue component to clone DOM elements Live demo here Install yarn add vue-cloneya # or npm i vue-cloneya Import import Vue from 'vue'

Rida Amirini 15 Aug 27, 2022
An escape hatch for DOM Elements in Vue.js components.

vue-dom-portal An escape hatch for DOM Elements in Vue.js components. The directive v-dom-portal will move DOM Nodes from their current place in a Vue

Caleb Roseland 202 Nov 2, 2022
A vue directive to keep dom ratio

vue-keep-ratio [ไธญๆ–‡้กน็›ฎไป‹็ป] As there comes a new css attribute: aspect-ratio, I picked up my old work vue-keep-ratio, use a more adaptive (but hack) way t

Aiello 6 Sep 13, 2021
Vue component to trap the focus within a DOM element

focus-trap-vue Vue component to trap the focus within a DOM element Installation For Vue 2 npm install focus-trap focus-trap-vue For Vue 3 npm install

Eduardo San Martin Morote 169 Jan 1, 2023
Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.

vue3-touch-events Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x. The easiest way to make your inte

Robin Rodricks 108 Dec 27, 2022
A directive-supported plugin for transfering DOM to another location in Vue.js components

A directive-supported plugin for transfering DOM to another location in Vue.js components

Emil Zhai 1 Jul 13, 2019
Detect DOM element resizing based on Vue3.x

Detect DOM element resizing based on Vue3.x

null 0 Jul 22, 2021
Convert HTML DOM Element to PDF

Convert HTML DOM Element to PDF. You can save a specified element as PDF File, print it directly, or preview as PDF.

Emily Wang 0 Jul 29, 2019
A component to render defined aspect ratio elements

vue-aspect-ratio A component to render a certain aspect ratio element without javascript computations. It exposes a default slot that will have the de

Alberto De Agostini 37 Nov 24, 2022
๐Ÿ–ฑ An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible

?? Vue Cursor Fx An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible Installation This package is a

Luca Iaconelli 56 Aug 18, 2022