Description

This project is simple BEM-style classnames generator for Vue.js 3.

• 💪 Vue 3 Composition API
• 🔥 Written in TypeScript
• 🦄 Configurable

Inspired by:

• vue-bem-cn
• element-plus

🦄 Quick example

Button.vue

<template>
  <button :class="[b(), bm(size)]"> 
    <slot /> 
  </button>
</template>

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

const props = defineProps({
  size: {
    type: String
  }
})

const { b, bm } = useBem('ui-button')

</script>

Page.vue

<template>
  <div class="example">
    <ui-button type="button" class="mix-any-class" size="large"> 
      I am BEM button! 
    </ui-button>
  </div>
</template>


<script lang="ts" setup>
  import UiButton from 'components/UI/Button.vue';
</script>

It will compiles to

<div class="example">
 <button class="mix-any-class button button--size-large" type="button">  
      I am BEM button!
 </button>
</div>

Refer to documentation for more details.