Easy implementation of BEM in Vue 3.x, helps you utilize the BEM specification extra concisely in vue3.
Set up
npm i vue3-bem
Utilizing
vue3-bem can also be very straightforward to make use of. As proven beneath.
// .vue
import useBem from "vue3-bem";
const bem = useBem("block");
<div :class="bem('elem', 'chosen')"></div>
.block {
&__elem {
&--selected {
}
}
}
Api
Use useBem to set the block.
Use bem to configure components and modfiers to return lessons.
kind BemFunction = operate (
e?: string | null,
m?: string | string[] | { [key in string]: boolean }
) => string[];
useBem: operate (block: string) => BemFunction;
bem: BemFunction
Instruments
When you assume it is an excessive amount of hassle to jot down import for every part, you should use the plugin vite-plugin-vue3-bem so that you needn’t write import vue3-bem.
Use vite-plugin-vue3-bem might help you take away import.
// prefer it
<script lang="ts" bem-block="tip">
</script>
// equal to
<script lang="ts" bem-block="tip">
import useBem from "./useBem";
const bem = useBem('tip');
</script>
// vite.config.js
import ViteVue3Bem from "vite-plugin-vue3-bem";
plugins:[
ViteVue3Bem()
]
Kind Declaration
Kind declaration is required in typescript to forestall error reporting.
// env.d.ts
import "vue3-bem";
Instance
Customized block title
<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('merchandise', ["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('merchandise', {"chosen": 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 in case you assume it’ll provide help to.
github: vue3-bem