buefy / buefy

Lightweight UI components for Vue.js based on Bulma

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Check out the official @ntohq/Buefy-next fork in development for Vue v3.0.0+ support.

Features

• Keep your current Bulma theme / variables easily
• Supports both Material Design Icons and FontAwesome
• Very lightweight with none internal dependencies aside from Vue & Bulma
• About 88KB min+gzip (with Bulma included)
• Semantic code output
• Follows Bulma design and some of the Material Design UX
• Focus on usability and performance without over-animating stuff

Documentation

The documentation is in the docs directory, it serves as the demo as well.

Browse online documentation here.

Quick start

You need Vue.js version 2.6+. (Vue 3 is supported here)

1 Install via npm

npm install buefy

2 Import and use Buefy

Bundle

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

or Individual Components

import Vue from 'vue'
import { Field, Input } from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

3 Include Material Design Icons

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">

If you want to customize the icons or the theme, refer to the customization section on the documentation.

Alternatively, you can use a CDN or even download

<!-- Buefy CSS -->
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">

<!-- Buefy JavaScript -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

Start On Cloud IDE

https://github.com/buefy/buefy

Browser support

Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+ is only partially supported.

Contributing

Please see the contributing guidelines

Versioning

Version will follow v0.Y.Z, where:

• Y: Major (breaking changes)
• Z: Minor or patch

Core Team

Walter Tommasi

Special thanks to Rafael Beraldo, the original author.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Rafael Beraldo 💻	Alexandre Paradis 💻	Yuxing Liao 💻	Adrien 💻	Apolokak Lab 💻	Antério Vieira 💻	Jorge Nieto 💻	Mateus Machado Luna 💻
All contributors

This project follows the all-contributors specification. Contributions of any kind welcome!

License

Code released under MIT license.

buefy's Issues

no buefy.css after npm install buefy

import 'buefy/lib/css/buefy.css' does not work because it seems there's no buefy.css

Feature request: Tabs

Great work putting Vue and Bulma together. Couldn't find tabs-component anywhere. Any plans to add that?

pageChange event on Table

Hi, I really like Buefy so far, but there seems to be no way to use async data for the table component with sorting, paging, filtering etc.
The pagination component is tied into the table, but has no reference to it... and the table itself does not emit events for e.g. paging - at least I couldn't find a way to detect pagination events.
So, built-in remote data support would be awesome, but at least adding a reference to the pagination component and adding a pagination event to the table would help :)
See my table comparison here: http://www.rent-a-hero.de/wp/wp-content/uploads/2017/04/vuegrid/#/

Table header select outline border messing up

This is awesome table mate. fully responsive. Do we have search functionality?

npm latest version is behind github version, table component affected

I have the latest version through npm, as directed, and attempted to use the Table component.

• The table component ignores the "component" attribute.
• The formatDate method in the example displays the following as a string in the table cell: " 4/23/2017 "

I cloned the Github repo, played with that and everything works as expected. I added my own custom component and it works great.

I found that there was code in the github distributed TableColumn.js that is not in the npm distributed version.

Emit events on Tables header click for backend sorting

Is there a way to hook into the tables sort order etc to let back end handle the pagination, order etc?

Thanks

can't disable/hide tooltip without disabling wrapped button

I have a button wrapped by a tooltip. Based on a condition x, I want the button to be disabled if x === true and the tooltip to be disabled/hidden if x === false. Since the tooltip wraps the button, there seems no way to decouple this logic. Is it possible to disable/hide the tooltip without disabling/hiding the wrapped button?

TypeError: Cannot read property 'length' of undefined

When using Dropdown (General > Dropdown), I get console error of cannot read property 'length' of undefined, which is located at node_module/buefy/lib/src/index.js.

TypeError: Cannot read property 'length' of undefined
    at /Users/bahit/Projects/markx/app/node_modules/buefy/lib/src/index.js:formatted:3637
    at Array.<anonymous> (/Users/bahit/Projects/markx/app/node_modules/buefy/lib/src/index.js:formatted:2445)
    at t (/Users/bahit/Projects/markx/app/node_modules/buefy/lib/src/index.js:formatted:2413)

Above error lines expanded after I used chrome dev tool's expanding the minified code (else it would just indicate line 3 minified).

I don't know how to use source map.

I only used the provided code:

<b-dropdown>
    <button class="button" slot="trigger">
        <span>Dropdown</span>
        <b-icon icon="arrow_drop_down"></b-icon>
    </button>

    <b-option>Action</b-option>
    <b-option>Another action</b-option>
    <b-option>Something else</b-option>
</b-dropdown>

"ReferenceError: document is not defined" when I use Select component with Nuxt.js

I just copy and paste example code into my Nuxt.js project, and I got this error.

Nuxt.js Error:

ReferenceError: document is not defined
    at VueComponent.created (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\buefy\lib\src\index.js:3:1086)
    at callHook (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue\dist\vue.runtime.common.js:2271:21)
    at VueComponent.Vue._init (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue\dist\vue.runtime.common.js:3754:5)
    at new VueComponent (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue\dist\vue.runtime.common.js:3918:12)
    at createComponentInstanceForVnode (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:5182:10)
    at renderComponent (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:6696:40)
    at RenderContext.renderNode (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:6681:7)
    at RenderContext.next (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:169:14)
    at cachedWrite (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:30:9)
    at RenderContext.renderNode (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:6689:7)
    at RenderContext.next (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:169:14)
    at RenderContext.cachedWrite [as write] (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:30:9)
    at RenderContext.next (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:172:14)
    at cachedWrite (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:30:9)
    at RenderContext.renderNode (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:6689:7)
    at RenderContext.next (C:\Users\xxxxxxxxxx\Desktop\testapp\node_modules\vue-server-renderer\build.js:169:14)

Table default-sort doesn't seem to honor the sort order

I have a table which is setting a default sort with a descending order:

    :default-sort="['updated_at', 'desc']"

The default column appears to be honored, but not the sort order. It is always getting output in ascending order until the column is manually clicked to reverse it.

select addon appears squashed

https://buefy.github.io/#/documentation/input

The currency symbol overlaps the dropdown arrow:

<b-dropdown> doesn't change the dopdown's text when you change value

in your <b-dropdown> component, when i choose "another action" for example in your demo, the dropdown still says "dropdown" while that's not how a drop down works noramlly as dropdowns with text are considered as custom "select" fields.

check out the dropdown section here : https://vuetifyjs.com/components/buttons

I think you should consider adding an option that sets the value selected on the ui

Customize buefy

Hi, I don't know how to customize buefy sass file in vue-cli project. Followed documentation but without success. Thank you

Improve the readability of the code

Add comment explaining what each method, watcher and computed property do in every component.

Status:

• Checkbox
• Dropdown
• Field
• Icon
• Input
• Message
• Notification
• Pagination
• Radio
• Radio Button
• Select
• Snackbar
• Switch
• Table
• Toast
• Tooltip

Add optional "Show Password" label to password-reveal

When using a password input:

<b-input type="password"
        placeholder="Password reveal input"
        password-reveal>

It'd be nice if you could hover on the eye and a label would appear that says "Show Password", maybe with another optional flag like password-reveal-tooltip, so the use would be something like this:

<b-input type="password"
        placeholder="Password reveal input"
        password-reveal
        password-reveal-tooltip="Show Password">

Style doesn't work with CSS

I tried importing import 'buefy/lib/buefy.css' but the toast style did not work.

I am able to get the style after importing the scss file now!

Se precisar de referencias ou ideias

https://chenz24.github.io/vue-blu/#/

este projeto baseado no Bulma, e no elelmetUI http://element.eleme.io/#/en-US/component/installation

$size is not defined

I get the following error when I try to import buefy:

ERROR in .//css-loader?{"minimize":false}!.//postcss-loader!.//sass-loader/lib/loader.js!.//buefy/lib/buefy.css
Module build failed:
margin-left: -calc($size / 2px);
^
Undefined variable: "$size".
in /home/aks/playground/forme/node_modules/buefy/lib/buefy.css (line 7927, column 22)

Set option on-type on non-searchable Selects

I think a good feature would be that when we write in the search field and press the tab, it selects the best match. It is a little tedious to have to select with cursors or the mouse.

Unexpected token import on current vue-cli project

If start a new project from scratch using vue init webpack "myproject" all works fine.
But when try to use Buefy on my current project (also based on vue cli) The Chrome console throws the following error:
Uncaught SyntaxError: Unexpected token import

I've tried to exclude: /node_modules(?![\/]buefy[\/])/ on the webpack.base.conf.js but haven't been lucky.

I have tried other libraries to verify that it is not my project and they effectively work.

New Table doesn't allow non-selectable rows

The new template syntax for tables is great, but it now requires a :selected prop on the component. There are times when I'd like for table's rows not to be selectable but still would like most other features on the component.

If no :selected prop is synced on the table, clicking a row throws an Uncaught TypeError: Cannot read property 'row' of undefined error from the last $emit statement in the following code block.

selectRow: function selectRow(row, index) {
    this.$emit('click', row);

    if (this.selected === row) return;

    this.$emit('update:selected', row);

    this.$emit('select', row, this.selected.row);
}

Discrepancy between Bulma CSS and Buefy CSS on `.container` class

So I've been having some weird issues with the containers styling inside Buefy for the past day or so and finally, I think I've narrowed it down to an discrepancy between the Buefy CSS and the CSS you'd get from Bulma directly.

The specific case in question I've been dealing with is based around their full height hero sections but is replicated anywhere where you use a container.

This is the CSS from Bulma documentation:

This is the CSS from importing the Buefy CSS inside my project:

Notice the lack of a max-width within the included Buefy CSS, as a result, it is causing the container to expand the full-width of this hero element on the page in question.

For reference, the component that I am trying to render is located here

Module build failed: Error: Couldn't find preset "env"

Module build failed: Error: Couldn't find preset "env" relative to directory "/node_modules/buefy"
    at /node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19

I got this error when I tried to import Buefy with Webpack using laravel-mix.

Strange attr in Select example

I'm reading Buefy documentation about Select component: https://buefy.github.io/#/documentation/select
and I see strange attr group in code example. It's seems wrong and it doesn't work.

Thanks!

Checkbox Group not updating v-model and not emitting change event

Overview of the problem

Buefy version: [^0.3.0]
Vuejs version: [^2.1.10]
OS/Browser: Windows, Chrome

Description

HTML:

    <div class="field">
        <p class="control">
            <b-checkbox-group v-model="clients" @change="groupChange">
                <div class="field">
                    <b-checkbox custom-value="1" @change="checkChange">Item 1</b-checkbox>
                </div>
                <div class="field">
                    <b-checkbox custom-value="2">Item 2</b-checkbox>
                </div>
                <div class="field">
                    <b-checkbox custom-value="3">Item 3</b-checkbox>
                </div>
                <div class="field">
                    <b-checkbox custom-value="4">Item 4</b-checkbox>
                </div>
            </b-checkbox-group>
        </p>
    </div>

script:

    var vm = new Vue({
        el: '#app',

        data() {
            return {
                clients: []
            }
        },

        methods: {
            groupChange() {
                console.log('impl.groupChange()');
            },
            checkChange() {
                console.log('impl.checkChange()');
            }
        }
    });

Steps to reproduce

1. Load the page
2. Use Chrome's Inspect tool
3. Switch to the Vue inspection tool
4. Notice that we have one BCheckboxGroup and 4 BCheckbox under Root. All 5 Buefy components are at the same level.
5. Switch to Chrome's Console viewer
6. Check the first checkbox
7. Notice that "impl.checkChange()" was logged but "impl.groupChange()" was not
8. Switch back to the Vue inspection tool
9. Notice that the BCheckbox object checked has data.newValue=true but props.checked=false
10. Notice that the BCheckboxGroup object still has an empty props.value and data.checkedList array
11. Notice that the Root client array is still empty

Expected behavior

I expected the BCheckboxGroup's event to emit and its array values to change when I checked a checkbox inside the group. I expected the client array to have a value in it.

I suspect that this is my error, but the documentation seems to lack detail for this particular control (and others).

Actual behavior

See repro steps above.

Rich modal with custom component

Would you consider adding another modal, that can be open programmatically, where you could pass a component? This would allow to create rich modals (eg. with forms).

buefy.css much too aggressive

If you set a base font-family for example and then subsequently add buefy.css, buefy stomps all over the site rules.

Is the inclusion re-adding all of the bulma styles back in? Is there a way to only add styles necessary?

New select component broken on mobile screens

First of all: the new select component is great.

However, it does have a bug. When opened, the select options float out of view in the top right corner of the screen instead of, what I assume is the intention, in the middle of the screen like dropdowns, which work as intended.

I really love your work on Buefy :)

Cannot build buefy because of sass errors

Can not build or run npm run dev at the moment.

 error  in ./docs/App.vue

Module build failed: 
            color: $text-lighter;
                  ^
      Undefined variable: "$text-lighter".
      in [workdir]/buefy/src/scss/components/_select.scss (line 22, column 20)

Table checked also calls select event handler

I have a table that is checkable and selectable. With both these options set, clicking the checkbox results in the select callback being called first without any way to determine if the select was triggered by a check.
Since my code navigates on select, the check callback is never called. If I set selectable to false or remove the navigation code in the select callback, then the check callback behaves as expected.

Serve builds

It would be easier to use this project if you provided the compiled JS, that way developers don't have to alter their development environment. :)

Cannot access Vuex $store inside Modal component

Trying to access this.$store inside a Modal with component prop returns undefined, and I have no idea why that's happening.

Feature request: Table column slots

Hi, I just tried buefy, it is really good, but I have a problem with the table component.

I think it will be nice if we can put custom stuff inside a table column using slots and also a way to get the current loop index.

<b-table-column label="#">
  // This is an example from ElemeFE/element
  <template scope="scope">
     {{ scope.$index + 1 }}
  </template>
</b-table-column>

My use case

• An "action column" (It is possible by using the component prop for this, but it is very limited.)

// Not possible to listen to component events & assign a custom prop to my component.
<b-table-column field="id" label="Action" component="app-table-action"></b-table-column>

• Showing row numbers (This is currently possible, but it will be much easier if we can just get the row number/index)

<b-table-column field="id" label="#" width="40" numeric :format="formatNumber"></b-table-column>

formatNumber (value, row) {
    return this.customers.findIndex(row => row.id === value) + 1
 }

v-model with textarea input throwing TypeError

First off, great work! I love Buefy 👍👍👍

V-model with a textarea input is throwing this error:

Uncaught TypeError: Cannot read property 'checkValidity' of undefined
    at VueComponent.onBlur (eval at <anonymous> (app.js:1226), <anonymous>:3:5151)
    at boundFn (eval at <anonymous> (app.js:721), <anonymous>:125:14)
    at HTMLTextAreaElement.invoker (eval at <anonymous> (app.js:721), <anonymous>:1659:18)
onBlur @ index.js?b243:3
boundFn @ vue.esm.js?65d7:124
invoker @ vue.esm.js?65d7:1658

For this straightforward code in my template:

<b-input type="textarea" v-model="modelMe"></b-input>

I tried wrapping it in a field but same result. Changing the input type to textbox resolves the issue (both for wrapped in a field and unwrapped).

Components to tables

Hi Rafael,

Thank you very much for these great components. Sadly a few features are missing that I could use it in my projects. One of the most important features I would need is the following:

I would need something similar as described in #8 but for tables. Filters are a good way to change the data it self, but if I want to add html/css as well, this does not work. Therefore injecting components would be a great feature.

Here are a few examples how I would like to represent data in tables:

Table backend-sorting resetting sorted column

I'm not quire sure if I do it wrong. When enable backend-sorting this mean I click on table header to sort, I also reload data for the table right? So here is my sort method to fetch data from the backend.

sorted(field, order) {
    this.$store.dispatch('FETCH_ARTICLES', {
        sort: {
            field,
            order: (order === 'asc') ? 1 : -1
        }
    })
}

But the problem when reload data, table seem to be losing current state of ordering, so it always be ascending when I click on it.

Am I do it the wrong way?

Animation prop for Dialogs

i would like to know if you would consider adding animate.css as a depedency for you animations.

Use case : i want to change the animation of a alerts / confirms you have but i can't really do that as you transitions are already made by you in each component based on your own custom classes.

I already use animate.css (and many vuejs or bulma css users use it, even bulma talks about it on the docs), if you add animate.css as a depedency it would be easy to change animations with your ui-kit by just changing the animatio class i would pass to a component and i woun't have to import animate.css which has common animation names with you own animation names (there's at least 2 conflicts in the keyframe names here) https://daneden.github.io/animate.css/

Focused button on Dialog not displaying

I never get 'confirmed' to fire, escape keypress or enter keypress has the same result which toggles onCancel for me.

    async toDelete (resource) {
      this.$dialog.confirm({
        message: 'Are you sure?',
        onCancel: () => {
          console.log('cancelled')
        },
        onConfirm: () => {
          console.log('confirmed')

Image preview on hover - tool tip

Would it be possible to add the ability to add an imiage to the b-tooltip attributes.
Reason for this, is I would like a image thumbnail on hover. Thank you!

Website breaks on MS Edge & IE

Hello
I was just passing by and noticed that the buefy website (docs section) breaks on MS Edge

Microsoft Edge 40.15063.0.0
Microsoft EdgeHTML 15.15063

the error says something doesn't support forEach thrown in vendor bundle
perhaps it is related to some ES6+ feature?
but worked fine in other browsers except as well for Internet explorer 11

however internet explorer says it is a syntax error

Selection controls initial state always false

Checkbox and Switch initial state is always false, event when setting a v-model that is true.

buefy/lib

Where is the original lib source without compiled. It may be possible to integrate java-spring-vue-buefy-isomorphic.

Click event for table cell / best way to do vue-router navigation from table cell?

I want to navigate to vue-router links from table cells, like this:

template:

<b-table>
[...]
  <b-table-column click="routerLinkToDetails"></b-table-column>
[...]
</b-table>

script:

methods: {
  routerLinkToDetails() {
    this.$router.push({ path: '/details/:recordId' });
  }

But it seems that a click event can only be bound to the row, not an individual cell.

Is it/would it be possible to bind a click event to a table cell? Or, is there another way to do router navigation from a table cell?

select input: list of options retaining old values when data updates

I have a select input with a list of options that gets updated based on another user input, like this:

template:

<!-- selectA -->
<b-select v-model="selectArray" @change="changeArray1()">
  <b-option v-for="i in [0, 1, 2]" :value="i"
  :key="i">
    {{ i }}
  </b-option>
</b-select>

<!-- selectB -->
<b-select>
  <b-option v-for="item in array1" :value="item"
  :key="item">
    {{ item }}
  </b-option>
</b-select>

script:

data() {
  return {
    array1: [1, 2, 3],
    selectArray: 0,
  };
},
methods: {
  changeArray1() {
    const arrays = [[1, 2, 3], [2, 3, 4], [4, 5, 6]];
    this.array1 = arrays[this.selectArray];
  },
},

As you can see, the user changing the input in selectA changes the values held in array1. Some of these values are the same, some different. Instead of the options for selectB being cleanly updated to bind to the new values held in array1, the list of selectB options retains the original values held in array1 and appends the values held in the new array1. I haven't determined the logic, but on multiple user inputs in the selectA to reassign values to array1, sometimes the duplicate values are appended to the end of the list of options for selectB and sometimes not.

One solution I explored was forcing the DOM to re-render, but after trying many things I was not able to get that to work.

Am I missing something? How can I get the select list to update cleanly?

styling on fields wrapping inputs disappears on blur

Blur removes the styling bound to the field type wrapping inputs on blur. This happens on the documentation page for Buefy, where the green 'Success' etc disappears on leaving the input box. When the field type is bound to a property it will only display the appropriate styling when the property changes.

error occurred at dialog prompt

i got error when submitted at dialog prompt

Uncaught TypeError: Cannot read property 'checkValidity' of undefined
    at o.html5Validation (app.ed77701….js:1)
    at o.n [as html5Validation] (vendor.726eec4….js:6)
    at o.blur (app.ed77701….js:1)
    at n (vendor.726eec4….js:6)
    at HTMLInputElement.t (vendor.726eec4….js:6)
    at Object.Ot [as removeChild] (vendor.726eec4….js:6)
    at r (vendor.726eec4….js:6)
    at n (vendor.726eec4….js:6)
    at vendor.726eec4….js:6
    at vendor.726eec4….js:6
    at c (vendor.726eec4….js:6)
    at HTMLDivElement.d (vendor.726eec4….js:6)

Checked example on table in the documentation doesn't work

On the documentation site, the column of checkboxes in the table no longer work. The column appears when the switch is toggled on, but then clicking a checkbox no longer does anything, from either a row or the select all checkbox in the header row.

TABLE - nested fields (feature request)

It would be nice to get value from nested fields :)

<b-table-column field="city.name"></b-table-column>

USER JSON
{
   name: "Joe",
   age: 34,
   city: {
        id: 12,
        name: "Paris"
    }
}

Currently i got it by using

<b-table-column field="city" :format="formatCity"></b-table-column>

formatCity(value) {
      return value.name
}

funky formatting on select input

In Chrome, select inputs default to native formatting, and the downward caret is pushed to the far right. In Firefox, formatting of the select inputs behaves as expected, but the downward caret is still pushed to the far right.

Screenshots for Chrome                                                                                * see caret pushed to right *
1:

2:

Screenshots for Firefox

1:

2:

Feature request: Autocomplete

The title says it all! :)