Using Bulma class syntax as components and props


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)



yarn add vue-bulma-components


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'


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

import vueBulmaComponents from 'vue-bulma-components'

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


Example with grid system

Original Bulma way:

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

Vue-bulma-component way:

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

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.

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

export default {
components: {
    box: bulmaComponentGenerator('box', 'span'),
    ytextarea: bulmaComponentGenerator('textarea', 'textarea'),
    ybutton: bulmaComponentGenerator('button', 'button')
    textarea is-danger 
    placeholder="Translate Bulma css api to vue components." 


<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..