Using Bulma class syntax as components and props

vue-bulma-components

This library can generate components based on Bulma's class syntax. Bulma is a modern CSS framework based on Flexbox.

To get an idea of what this project is about, check the Demo page and the related code. (3kb minified)

Example

Install

yarn add vue-bulma-components

or

npm install --save vue-bulma-components

Then install Bulma by following one of the 3 ways available.

npm install bulma

Use all components globally in your app

Inside your main.js

import vueBulmaComponents from 'vue-bulma-components'
import 'bulma/css/bulma.css'

Vue.use(vueBulmaComponents)

You can also prefix all the bulma components ( to avoid collision with existing components)

import vueBulmaComponents from 'vue-bulma-components'
Vue.use(vueBulmaComponents,{prefix:'y-'})

Instead of using <columns/> you now need to use <y-columns/>.

Usage

Example with grid system

Original Bulma way:

<div class="columns is-mobile">
  <div class="column is-half is-offset-one-quarter">
    A column 
   </div>
</div>

Vue-bulma-component way:

<columns is-mobile>
  <column is-half is-offset-one-quarter>
    A column
  </column>
</columns>

You can also create any vue-bulma-component by calling bulmaComponentGenerator(bulmaComponentStr). By default, most of the components are rendered as <div>.

To generate Bulma components: bulmaComponentGenerator(bulma_coponent_name,rendered_outer_html_element ), rendered_outer_html_element is optional.

<script>
import { bulmaComponentGenerator } from 'vue-bulma-components'

export default {
components: {
    box: bulmaComponentGenerator('box', 'span'),
    ytextarea: bulmaComponentGenerator('textarea', 'textarea'),
    ybutton: bulmaComponentGenerator('button', 'button')
}
}
</script>

<ytextarea 
    textarea is-danger 
    placeholder="Translate Bulma css api to vue components." 
    rows="10"
    >
</ytextarea>

<box/>

<ybutton button is-info is-outlined is-large>Submit</ybutton>

Generated components

If you are thinking this may help you in your current projects or in the future, take a look at the plugin's repository, available on GitHub..