Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/c01nd01r/vue-bem-cn
✅ vue-bem-cn - Simple BEM class name generator for Vue.JS
https://github.com/c01nd01r/vue-bem-cn
bem classname vue vuejs
Last synced: 9 days ago
JSON representation
✅ vue-bem-cn - Simple BEM class name generator for Vue.JS
- Host: GitHub
- URL: https://github.com/c01nd01r/vue-bem-cn
- Owner: c01nd01r
- License: mit
- Created: 2017-02-26T12:12:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-08T18:45:16.000Z (about 6 years ago)
- Last Synced: 2024-07-05T23:59:50.298Z (4 months ago)
- Topics: bem, classname, vue, vuejs
- Language: JavaScript
- Homepage: http://codepen.io/c01nd01r/pen/Qdeovv
- Size: 128 KB
- Stars: 127
- Watchers: 3
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-bem-cn
[](https://travis-ci.org/c01nd01r/vue-bem-cn/)
[](https://www.npmjs.com/package/vue-bem-cn)
[](https://github.com/vuejs/vue/)
Simple [BEM](http://getbem.com/)-style class name generator for Vue.JS 2.*
## Table of Contents
* [Quick example](#quick-example)
* [Installation](#installation)
* [Usage](#usage)
* [API](#api)
## Quick example
Live demo: [codepen](http://codepen.io/c01nd01r/pen/Qdeovv)
Block **ui-button**. Vue [Single File Component](https://vuejs.org/v2/guide/single-file-components.html):
```vue
export default {
name: 'ui-button', // set block name
props: ['size', 'look', 'type', 'icon'],
}
👍
```
Using **ui-button** block in App.vue:
```vue
import Button from 'components/UI/Button.vue';
export default {
components: {
'ui-button': Button
},
}
I am BEM button!
```
Will be compile to:
```html
```
## Installation
* from [npm](https://www.npmjs.com/package/vue-bem-cn):
`npm i --save vue-bem-cn` / `yarn add vue-bem-cn`
And install with `Vue.use()` in your `main.js`:
```javascript
import vueBemCn from 'vue-bem-cn';
Vue.use(vueBemCn, {/* Your config, not required. See below */});
new Vue({...});
```
* from CDN:
```html
Vue.use(vueBemCn, {/* Your config, not required. See below */});
new Vue({...});
```
## Usage
For class name generation, enough to call `b()` method with `v-bind:class` or use `:class` in your template.
The Block name will be receive from `name` field of component or `block` field:
```vue
export default {
name: 'ui-button',
}
DIV tag will receive 'ui-button' class name
```
More examples in [API section](#api)
After component initialization (`created` lifecycle hook), every component, that has `string` in `name` or `block` fields recive `b()` method.
Also, you can call `this.b()` method in your component, if you need it.
### Q: What if I don't want to use `name` field for Block name? And what is `block` field ?
If you want, you can use `block` field instead of `name`, but keep in mind, **`block` prefer then `name`**:
```vue
export default {
name: 'ui-button',
block: 'bem-button', // prefer then `name: 'ui-button'`
}
DIV tag will receive 'bem-button' class name
```
### Q: I will want use another delimiters for BEM entities. And still I need namespances.
No problem. You can set your settings object with `Vue.use()` as second argument:
```js
import Vue from 'vue';
import vueBemCn from 'vue-bem-cn';
// default delimiters settings
const bemConfig = {
delimiters: {
ns: '', // namespace
el: '__', // element delimeter
mod: '--', // modifier delimeter
modVal: '-', // value delimeter for modifier
}
}
Vue.use(vueBemCn, bemConfig);
new Vue({...});
```
### Q: I will want use another name for `b` method.
Just change `methodName` option in config:
```js
import Vue from 'vue';
import vueBemCn from 'vue-bem-cn';
const bemConfig = {
methodName: 'bem',
}
Vue.use(vueBemCn, bemConfig);
new Vue({...});
```
### Q: What about converting camelCase to kebab-case?
Check `hyphenate` option:
```js
import Vue from 'vue';
import vueBemCn from 'vue-bem-cn';
const bemConfig = {
hyphenate: true,
}
Vue.use(vueBemCn, bemConfig);
new Vue({...});
```
## API
### Block
Generate block name.
```vue
export default {
name: 'ui-button',
}
DIV tag will receive 'ui-button' class name
```
### Modifier of Block
Generate modifier of block name.
```vue
export default {
name: 'ui-button',
}
DIV tag will receive 'ui-button ui-button--size-large' class name
```
### Element of Block
Generate element of block name.
```vue
export default {
name: 'ui-button',
}
DIV tag will receive 'ui-button__text'
```
### Modifier of Element
Generate modifier of element name.
```vue
export default {
name: 'ui-button',
}
DIV tag will receive 'ui-button__text ui-button__text--look-primary' class name
```
### Mixins
Mix class names to block/element.
* with vue-bem-cn in your component:
```vue
export default {
name: 'ui-button',
}
DIV tag will receive 'ui-button block-mixin' class name
DIV tag will receive 'ui-button__text element-mixin' class name
```
* with Vue class attribute in parent component:
```vue
import Button from 'components/UI/Button.vue';
export default {
name: 'form',
components: {
'ui-button': Button
},
}
ui-button root tag will receive 'form__button ui-button' class name
```
### Default settings
```js
{
hyphenate: false,
methodName: 'b',
delimiters: {
ns: '',
el: '__',
mod: '--',
modVal: '-'
}
}
```
* `hyphenate: boolean` - hyphenation the resulting class name
```js
// { hyphenate: true }
b({ hasFocus: true }) // block--has-focus
```
* `methodName: string` - name of the method for generating the class name
```js
// { methodName: 'bem' }
b('elem') // [Vue warn]: Property or method "b" is not defined...
bem('elem') // block__elem
```
* `delimiters: Object` - delimiters for BEM entities
```js
// { delimiters: { ns: 'b-', modVal: '_'} }
b({ mod: 'val' }) // b-block b-block--mod_val
```