How to elegantly use BEM in vue3

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");
Enter fullscreen mode

Exit fullscreen mode

<div :class="bem('elem', 'chosen')"></div>
Enter fullscreen mode

Exit fullscreen mode

.block {
  &__elem {
    &--selected {
    }
  }
}
Enter fullscreen mode

Exit fullscreen mode



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
Enter fullscreen mode

Exit fullscreen mode



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>
Enter fullscreen mode

Exit fullscreen mode

// vite.config.js
import ViteVue3Bem from "vite-plugin-vue3-bem";

plugins:[
    ViteVue3Bem()
]
Enter fullscreen mode

Exit fullscreen mode

Kind Declaration
Kind declaration is required in typescript to forestall error reporting.

// env.d.ts
import "vue3-bem";
Enter fullscreen mode

Exit fullscreen mode



Instance



Customized block title

<div class="tip">
    <div :class="bem("wrap")"></div>
</div>
Enter fullscreen mode

Exit fullscreen mode

<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>
Enter fullscreen mode

Exit fullscreen mode

.tip {
    &__wrap {
    }
}
Enter fullscreen mode

Exit fullscreen mode



Inline modfiers

<div :class="bem('container')">
    <div :class="bem("header")"></div>
    <div :class="bem('merchandise',  ["selected", "highlighted"])"></div>
</div>
Enter fullscreen mode

Exit fullscreen mode

<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>
Enter fullscreen mode

Exit fullscreen mode

.tip {
    &__header {
    }
    &__item {
        &--selected {
        }
        &--highlighted {
        }
    }
}
Enter fullscreen mode

Exit fullscreen mode



Conditional modfiers

<div :class="bem('container')">
    <div :class="bem("header")"></div>
    <div :class="bem('merchandise',  {"chosen": true, "highlighted": highlighted})"></div>
</div>
Enter fullscreen mode

Exit fullscreen mode

<script>
    import useBem from "./useBem";
    const bem = useBem('tip');
    const highlighted = ref(false);
</script>
Enter fullscreen mode

Exit fullscreen mode

.tip {
    &__header {
    }
    &__item {
        &--selected {
        }
        &--highlighted {
        }
    }
}
Enter fullscreen mode

Exit fullscreen mode

Give a star in case you assume it’ll provide help to.

github: vue3-bem

Add a Comment

Your email address will not be published. Required fields are marked *