1.1.8 • Published 1 year ago

vue-use-bem v1.1.8

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Description

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

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

Inspired by:

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

1.1.8

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.0

1 year ago