Simple implementation of BEM in Vue 3.x, helps you use the BEM specification more concisely in vue3.
npm i vue3-bem
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: BemFunctionIf 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.
// *.d.ts import "vue3-bem";<div class="tip"> <div :class="bem("wrap")"></div> </div><script setup> import useBem from "./useBem"; const bem = useBem('tip'); </script>.tip { &__wrap { } }<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 { } } }<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 { } } }