Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/vouill/vue-bulma-components

Translate Bulma css api to vue components
https://github.com/vouill/vue-bulma-components

Last synced: 2 months ago
JSON representation

Translate Bulma css api to vue components

Lists

README 

        
# vue-bulma-components

[![Build Status](https://travis-ci.org/vouill/vue-bulma-components.svg?branch=feature%2Funit-tests)](https://travis-ci.org/vouill/vue-bulma-components)



The goal of this library is to use the bulma class syntax as components and props.



**3kb minified**



[Demo](https://teller-multisystems-48055.netlify.com) and [try the live demo](https://codesandbox.io/s/wk2w3z0zk5) too :)



## Usage

Exemple with grid system



Original Bulma way:



``` html



  


    A column

   




```



Vue-bulma-component way:

```html



  

    A column

  



```



### Using css class as directives at your advantage



One cool feature of using the Bulma css api as directives is toggling them. See how the `is-loading` class is handled



Ex:



``` html



  Send



```



Vue-bulma-component way:

``` html



  Send



```



Much nicer right ? ;)



**Note:**



You can also use the Pascal case notation, example:



``` html



  Send



```



### Using custom classes



If you want to add any other class simply use the normal class attribute



``` html



  Send



```



## Install



```shell

yarn add vue-bulma-components



or



npm install --save vue-bulma-components

```



Then install [Bulma](http://bulma.io/documentation/overview/start/) however you want :).



### Use all components globally in your app

Inside your main.js



```javascript

import vueBulmaComponents from 'vue-bulma-components'

Vue.use(vueBulmaComponents)

```



It will make globallly available all [these](https://github.com/vouill/vue-bulma-components/blob/master/src/plugin/helpers.js#L22) bulma components with the prefix `b-` or `B` if you prefer the Pascal case component naming.



You can also change the default prefix of all the bulma components (to avoid collision with existing components in your project)



 ```javascript

 import vueBulmaComponents from 'vue-bulma-components'

 Vue.use(vueBulmaComponents, {prefix: 'y-'})

 ```



 Instead of using `` you need to use ``

### Use specific bulma components in your components



``` html



  



  import { bulmaComponentGenerator } from 'vue-bulma-components'



  export default {

    components: {

        box: bulmaComponentGenerator('box')

    }

  }



```



Yes, you can actually create any vue-bulma-component by calling `bulmaComponentGenerator(bulmaComponentStr)`.



## Components



By default, most of the components are rendered as `
`. You can also use the prop `outerElement="span"` to change this behavior.



If you want to globally apply default outer element for some bulma component, you can use `outerElement` option on **`Vue.use()`**.



```javascript

import vueBulmaComponents from 'vue-bulma-components'

Vue.use(vueBulmaComponents, {

  outerElement: {

    'navbar': 'nav',

    'navbar-item': 'a'

  }

})

```



**If you use the `Vue.use()` method to use the vue-bulma-components.**



Most of the components are named after the bulma class they belong to.

Ex: `   ...`



However, some bulma components are also named after native html element. This is why [they are prefixed](https://github.com/vouill/vue-bulma-components/blob/master/src/plugin/helpers.js#L24).



Ex :

- Bulma : `input`

- vue-component-bulma: ``. This prefix is used to avoid collision with native html `` element.



**If you generate bulma components**



``` html



  import { bulmaComponentGenerator } from 'vue-bulma-components'



  export default {

    components: {

        box: bulmaComponentGenerator('box', 'span')

    }

  }



```



Usage:

`bulmaComponentGenerator(bulma_coponent_name,rendered_outer_html_element )`.



Note: `rendered_outer_html_element` is optional.



## Known limitations:



Currently you cannot use v-model with `` as expected. Because `vue-bulma-components` use functional components.



Don't worry, you can still bind a value to a `` component using `@input` event (it's what v-model does under the hood):



```html



  

    

    {{foo}}

  



  export default {

    data: () => ({

      foo: ''

    }),

    method: {

      handleInputChange (e) {

        this.foo = e.target.value

      }

    }

  }



```



Note:

If you come from the version `1.x.x`, there is a breaking change.



From `2.x.x` when using `Vue.use(vueBulmaComponents)`, default available components are prefixed by `` instead of `<[bulmacomponent]/>`