How to elegantly use BEM in vue3

In team development, we need to formulate css naming conventions, and the BEM specification is one of the css naming conventions. Our project was developed with vue3, and I didn't find the BEM framework that I wanted on the Internet, so I wrote one myself, then I will introduce vue3-bem to you.

Installation

npm i vue3-bem

Using

vue3-bem is also very easy to use. As shown below.

// .vue
import useBem from "vue3-bem";
const bem = useBem("block");

<div :class="bem('elem', 'selected')"></div>

.block {
  &__elem {
    &--selected {
    }
  }
}

Use useBem to set the block.

Use bem to configure elements and modfiers to return classes.

type BemFunction = function (
    e?: string | null,
    m?: string | string[] | { [key in string]: boolean }
) => string[];

function useBem(block: string) => BemFunction;

bem: BemFunction

Tools

If you think it's too much trouble to write import for each component, you can use the plugin vite-plugin-vue3-bem so you don't need to write import vue3-bem.

Use vite-plugin-vue3-bem can help you remove import.

// .vue
<template>
  <div :class="bem('elem', 'selected')"></div>
</template>

<script lang="ts" bem-block="tip">
// do some thing
</script>

<style lang="less"> 
.tip {
  &__elem {
    &--selected {
    }
  }
}
</style>

// vite.config.js
import ViteVue3Bem from "vite-plugin-vue3-bem";

plugins:[
    ViteVue3Bem()
]

Type Declaration
Type declaration is required in typescript to prevent error reporting.

// env.d.ts
import "vue3-bem";

Example

Custom block name

<div class="tip">
    <div :class="bem("wrap")"></div>
</div>

<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>

.tip {
    &__wrap {
    }
}

Inline modfiers

<div :class="bem('container')">
    <div :class="bem("header")"></div>
    <div :class="bem('item',  ["selected", "highlighted"])"></div>
</div>

<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>

.tip {
    &__header {
    }
    &__item {
        &--selected {
        }
        &--highlighted {
        }
    }
}

Conditional modfiers

<div :class="bem('container')">
    <div :class="bem("header")"></div>
    <div :class="bem('item',  {"selected": true, "highlighted": highlighted})"></div>
</div>

<script>
    import useBem from "./useBem";
    const bem = useBem('tip');
    const highlighted = ref(false);
</script>

.tip {
    &__header {
    }
    &__item {
        &--selected {
        }
        &--highlighted {
        }
    }
}

Give a star if you think it will help you.

github: vue3-bem