vue-bemthis
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Vue BEM this !

A simple utility for conditionally joining classes together following BEM methodology

Documentation

BEM documentation: https://getbem.com/

Install

Install inside your project using NPM

npm install vue-bemthis

Usage

vue-bemthis works better with SCSS modules for scoped styles. In this example we use SCSS but this also works with CSS

Then, declare it like this in your Vue component:

<script setup lang="ts">
import { useBem } from "vue-bemthis";

const { block, element } = useBem();
</script>

vue-bemthis automatically detects the block of you SCSS file, in your Single file component.

If you respect the BEM methodology, it should be the only class with no "__" or "--". In any case, if you need to override the default block found, you can do useBem('some-other-block-name').

Then, in your template, you can use it like this:

Basic usage

<ul :class="block()">
  <li :class="element("item")">
    <a href="example.com" :class="element("link")">
      Link
    </a>
  </li>
</ul>

Usage with modifiers

vue-bemthis also gives you the possibility to add modifier for both block and elements. You have multiple ways to apply modifiers.

For example for a block named "list", it will get the scoped styles for:

  • block("listModifier") -> .list .list--listModifier
  • block(["one", "two"]) -> .list .list--one .list--two
  • block({ one: true, two: false }) -> .list .list--one

Of course, it works the same with element. For example for an element "item":

  • element("item", "itemModifier") -> .list__item .list__item--itemModifier
  • element("item", ["one", "two"]) -> .list__item .list__item--one .list__item--two
  • element("item", { one: true, two: false }) -> .list__item .list__item--one

Styles

Also, you SCSS could look like this. Notice that we use module CSS instead of scoped, but styles are still scoped to your component this way.

<style module lang="scss">
.list {
  // styles for list

  &--listModifier {
    // styles for list with modifier "listModifier"
  }

  &__item {
    // styles for item

    &--itemModifier {
      //styles for item with modifier "itemModifier"
    }
  }

  &__link {
    // styles for link
  }
}
<style>

Short syntax

vue-bemthis gives you the possibility to replace block and element methods with respective alias b and e

Package Sidebar

Install

npm i vue-bemthis

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

5.87 kB

Total Files

4

Last publish

Collaborators

  • kevbesset