--- title: How to elegantly use BEM in vue3 published: true description: Simple implementation of BEM in Vue 3.x tags: bem,css,vue3,javascript //cover_image: https://direct_url_to_image.jpg --- In team development, we need to formulate css naming conventions, and the `BEM` specification is one of the css naming conventions. Our project was developed with `vue3`, and I didn't find the BEM framework that I wanted on the Internet, so I wrote one myself, then I will introduce `vue3-bem` to you.

## Installation `npm i vue3-bem` ## Using vue3-bem is also very easy to use. As shown below. ```ts // .vue import useBem from "vue3-bem"; const bem = useBem("block"); ``` ```html

``` ```less .block { &__elem { &--selected { } } } ``` ## Api Use `useBem` to set the block. Use `bem` to configure elements and modfiers to return classes. ```ts type BemFunction = function ( e?: string | null, m?: string | string[] | { [key in string]: boolean } ) => string[]; function useBem(block: string) => BemFunction; bem: BemFunction ``` ## Tools If 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](https://github.com/KesionX/vue3-bem/tree/main/packages/vite-plugin-vue3-bem) can help you remove import. ```js // .vue ``` ```ts // vite.config.js import ViteVue3Bem from "vite-plugin-vue3-bem"; plugins:[ ViteVue3Bem() ] ``` Type Declaration Type declaration is required in typescript to prevent error reporting. ```ts // env.d.ts import "vue3-bem"; ``` ## Example ### Custom block name ```html

``` ```ts ``` ```less .tip { &__wrap { } } ``` ### Inline modfiers ```html

``` ```ts ``` ```less .tip { &__header { } &__item { &--selected { } &--highlighted { } } } ``` ### Conditional modfiers ```html

``` ```ts ``` ```less .tip { &__header { } &__item { &--selected { } &--highlighted { } } } ``` Give a star if you think it will help you. github: [vue3-bem](https://github.com/KesionX/vue3-bem)

kesion

How to elegantly use BEM in vue3

Join Our Newsletter. No Spam, Only the good stuff.