https://github.com/juliendargelos/bem-vue

https://github.com/juliendargelos/bem-vue

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/juliendargelos/bem-vue
• Owner: juliendargelos
• Created: 2017-09-30T21:27:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-01T18:37:35.000Z (over 7 years ago)
• Last Synced: 2024-11-11T05:40:11.691Z (2 months ago)
• Language: JavaScript
• Size: 26.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# BEM Vue

## Installation

### Install the package:

```

npm install https://github.com/juliendargelos/bem-vue.git --save

```

### Import and include the mixin in a component:

```vue

# src/components/btn.vue

  

    

    

  

import Bem from 'bem-vue'

export default {

  mixins: [Bem]

}

.btn

  background: black

  padding: 20 25px

  font-size: 14px

  color: white

  &--primary

    background: blue

  &--danger

    background: red

  &--size

    &--small

      font-size: 10px

    &--medium

      font-size: 14px

    &--large

      font-size: 18px

  &__icon

    margin-right: 10px

    display: inline-block

    &--type

      &--add

        content: '+'

      &--remove

        content: '×'

```

### Specify your BEM block name and your modifiers:

```vue

# src/components/btn.vue

...

import Bem from 'bem-vue'

export default {

  mixins: [Bem],

  data: function () {

    return {

      bem: {

        name: 'btn',

        modifiers: {

          primary: false,

          danger: false,

          size: null

        },

        elements: {

          icon: {

            type: null

          }

        }

      }

    }

  }

}

...

```

### Play with it:

```vue

# src/components/btn.vue

  

    

    

  

...

```

The values you put in `data.modifiers` are used as default values for their modifiers.

They also determine wich type of values will be accepted for their modifiers:

- A `null` or string default value will make the modifier accepting only string and `null` values

- A `true` or `false` default value will make the modifier accepting only boolean values

You can override these default values (but not their type) calling a component and specifying its corresponding props:

```vue

# src/app.vue

  

import Bem from 'bem-vue'

export default {

  mixins: [Bem],

  props: ['danger', 'size', 'icon-type']

...

```