Configuration

VueUseBem provides different options for customization.

You can configure:

• delimiters
• BEM method name
• namespace

Basic configuration

You can customize settings via plugin options

import { createApp } from 'vue';
import { VueBem } from 'vue-use-bem';

import App from './App.vue';

const app = createApp(App);

app.use(VueBem, {
  namespace: 'ui',
});

app.mount('#app');

For more details refer to options details

Namespace

The namespace is extremely useful for building UI libraries. You can provide custom prefix (namespace) for all your components.

Let's look at example and set namespace to ui:

import { createApp } from 'vue';
import { VueBem } from 'vue-use-bem';

import App from './App.vue';

const app = createApp(App);

app.use(VueBem, {
  namespace: 'ui',
});

app.mount('#app');

Than use composable function or global bem mode for define class:

<script setup>
import { useBem } from 'vue-use-bem';

const { b } = useBem('button');
</script>

<button :class="b()" type="button">
  My button
</button>

It will compile to html:

<button class="ui-button">My Button</button>

That's it 🔥

BEM method name

Via plugin install, package inject global bem method in Vue instance.

You can customize method name as well via plugin options:

import { createApp } from 'vue'
import { VueBem } from 'vue-use-bem'

import App from './App.vue'

const app = createApp(App)

app.use(VueBem, { 
  injectGlobalMethod: true
  methodName: 'bem'
})

app.mount('#app')

And then use your custom method in templates:

<template>
  <div :class="bem()"></div>
</template>

Delimiters

Default delimiters:

const delimiters = {
  namespace: '-', // ns-block
  element: '__', // block__element
  modificator: '--', // element--modificator
  modificatorValue: '-', // element--modificator-value
};

You can customize delimiters via plugin options delimiters:

import { createApp } from 'vue';
import { VueBem } from 'vue-use-bem';

import App from './App.vue';

const app = createApp(App);

app.use(VueBem, {
  delimiters: {
    namespace: '+',
    modificator: '&',
  },
});

app.mount('#app');

It will generate classes like this:

<div class="ns+block">
  <p class="ns+block__element ns+block__element&modificator"></p>
</div>

Hyphenate (camelCase -> kebabCase)

You can pass option hyphenate to convert all classes generated by bem function from camelCase to kebab-case

main.ts

import { createApp } from 'vue';
import { VueBem } from 'vue-use-bem';

import App from './App.vue';

const app = createApp(App);

app.use(VueBem, {
  hyphenate: true,
});

app.mount('#app');

component.vue

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

const { bem } = useBem('block');

const blockMods = reactive({ someMod: 'someValue' });
</script>

<template>
  <div :class="bem('', blockMods)"></div>
</template>

index.html

<div class="block block--some-mod-some-value"></div>