Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuebits/bem
Simple implementation of BEM in Vue 3
https://github.com/vuebits/bem
bem bem-css bem-methodology bem-naming vue vuejs vuejs3
Last synced: 1 day ago
JSON representation
Simple implementation of BEM in Vue 3
- Host: GitHub
- URL: https://github.com/vuebits/bem
- Owner: vuebits
- License: mit
- Created: 2020-11-23T16:08:35.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-23T15:36:44.000Z (almost 4 years ago)
- Last Synced: 2024-12-15T10:51:48.815Z (11 days ago)
- Topics: bem, bem-css, bem-methodology, bem-naming, vue, vuejs, vuejs3
- Language: JavaScript
- Homepage:
- Size: 295 KB
- Stars: 4
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vue 3 BEM
*** Maintainers & Contributors welcome ***
Simple implementation of BEM in Vue 3.x
Based on Vue 2.x library vue-bem-cn
---
## Table of Contents
* [Installation](#installation)
* [API](#api)
* [Documentation](#documentation)
## Installation
`npm i @vuebits/bem` / `yarn add @vuebits/bem`
And install in your entry file (e.g. `main.js`):
```javascript
import { createBem } from '@vuebits/bem';
createApp(App).use(createBem({ /* your config here */ })).mount('#app');
```
## API
### Available functions:
* `createBem (options: BemOptions)`:
```ts
interface BemOptions {
hyphenate?: boolean;
}
```
### Vue instance properties and methods:
* `$bem ({ b, e, m }: BemItem): string[]`:
```ts
interface BemItem {
b?: string;
e?: string;
m?: string | string[] | {[key in string]: boolean};
}
```
## Examples
### Using component name by default:
```vue
Hello world!
import { defineComponent } from 'vue';
export default defineComponent({
name: 'hello-world'
});
.hello-world {
// some styles here
}
```
### Using hyphenated component name:
If you use PascalCase naming convence you should init library with `hyphenate` option:
```js
import { createBem } from '@vuebits/bem';
createApp(App).use(createBem({
hyphenate: true
})).mount('#app');
```
and then:
```vue
Hello world!
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld'
});
.hello-world {
// some styles here
}
```
### Custom block name:
```vue
Hello world!
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld'
});
.custom-block {
// some styles here
}
```
### Element name:
```vue
Hello world!
This is a description
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld'
});
.hello-world {
// some styles here
&__title {
// some styles here
}
&__description {
// some styles here
}
}
```
### Inline modfiers:
```vue
This is a description
This is a description
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld'
});
.hello-world {
// some styles here
&__text {
// some styles here
&--underlined {
// some styles here
}
&--highlighted {
// some styles here
}
}
}
```
### Conditional modfiers:
```vue
This is a description
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld',
data () {
return {
isHighlighted: false
};
}
});
.hello-world {
// some styles here
&__description {
// some styles here
&--underlined {
// some styles here
}
&--highlighted {
// some styles here
}
}
}
```