├── package.json ├── LICENSE ├── vue-bem-directive.js └── README.md /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-bem", 3 | "version": "0.0.3", 4 | "description": "Vue BEM Directive - A vue.js directive for automatic BEM class generation when creating components.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/AndersSchmidtHansen/vue-bem.git" 12 | }, 13 | "keywords": [ 14 | "vuejs", 15 | "directive" 16 | ], 17 | "author": "Anders Schmidt Hansen (http://pitcherific.com)", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/AndersSchmidtHansen/vue-bem/issues" 21 | }, 22 | "homepage": "https://github.com/AndersSchmidtHansen/vue-bem#readme" 23 | } 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Anders Schmidt Hansen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /vue-bem-directive.js: -------------------------------------------------------------------------------- 1 | exports.install = function(Vue) { 2 | Vue.directive('bem', { 3 | bind: function () { 4 | var _namespace = ' ' + ((this.modifiers.block) ? '' : 'c-') 5 | var _block = _namespace + this.vm.$options.name 6 | var _element = '' 7 | var _modifier = '' 8 | var _elementPrefix = '__' 9 | var _modifierPrefix = '--' 10 | 11 | if (this.arg) { 12 | var _bem = this.arg.split(',') 13 | _element = (_bem[0]) ? _elementPrefix + _bem[0] : '' 14 | _modifier = (_bem[1]) ? _modifierPrefix + _bem[1] : '' 15 | 16 | if (this.modifiers.block) { 17 | _block = _namespace + _bem[0] 18 | _element = _elementPrefix + _bem[1] 19 | _modifier = _modifierPrefix + _bem[2] 20 | 21 | if (_bem[1]) { 22 | this.el.className += _block + _element 23 | } else { 24 | this.el.className += _block 25 | } 26 | 27 | if (_bem[2]) { 28 | this.el.className += _block + _element + _modifier 29 | } 30 | 31 | } else { 32 | if (_element) { 33 | this.el.className += _block + _element 34 | } else { 35 | this.el.className += _block 36 | } 37 | 38 | if (_modifier) { 39 | this.el.className += _block + _element + _modifier 40 | } 41 | } 42 | } else { 43 | this.el.className += _block 44 | } 45 | } 46 | }) 47 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue.js BEM Directive 2 | 3 | If you find yourself writing a lot of long, tedious CSS class names in 4 | order to be consistent with the BEM naming convention, then try this 5 | directive. It automagically does all the heavy lifting based on 6 | the component's name found in $options.name. 7 | 8 | It can produce BEM classes similar to those Harry Roberts advocate in 9 | [this article](http://bit.ly/1R3nlNG). 10 | 11 | In its essence it's just a helper for myself, but I thought maybe it would help others out there. Feel free to improve it. 12 | 13 | With that said, if you write this: 14 | ``` 15 | Vue.component('user', { 16 | template: ` 17 |
18 | 19 |

...

20 |
21 | ` 22 | }) 23 | ``` 24 | 25 | It produces: 26 | ``` 27 |
28 | 29 |

...

30 |
31 | ``` 32 | 33 | A different example with a more tedious component name like 34 | 'congratulations-card': 35 | ``` 36 | Vue.component('congratulations-card', { 37 | props: [ 38 | 'title', 39 | 'message' 40 | ], 41 | template: 42 | `
43 |
44 |
{{ title }}
45 |

{{ message }}

46 |
47 |
48 | 49 |
50 |
` 51 | }) 52 | ``` 53 | 54 | Produces: 55 | ``` 56 |
57 |
58 |
59 |

60 |
61 | 62 |
63 | ``` 64 | 65 | ### Installation 66 | 67 | ``` bash 68 | $ npm install vue-bem 69 | ``` 70 | 71 | ### Usage 72 | 73 | First, import it... 74 | 75 | ``` javascript 76 | import VueBem from 'vue-bem' 77 | ``` 78 | 79 | Then register it globally... 80 | ``` javascript 81 | Vue.use(VueBem) 82 | ``` 83 | 84 | Or locally, for `vue-loader` or `vue-cli` situations where single file components are used... 85 | ``` javascript 86 | import VueBem from 'vue-bem' 87 | export default { 88 | directives: { 89 | 'bem': VueBem 90 | } 91 | } 92 | ``` 93 | 94 | 95 | --------------------------------------------------------------------------------