Start

Three ways to install and use Buefy

Icons

Several components uses icons, you might want to add a pack

Material Design Icons CDN
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
Font Awesome 5 CDN
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

Refer to its documentation for latest release / CDN.

Please note that Buefy doesn't include icon packs. You have to import it as you prefer (NPM, CDN, etc.).

If you opted for Font Awesome, you should update your constructor options.


For any installation and usage method, you need Vue.js version 2.5+.

1

NPM or Yarn (recommended)

After creating a project with vue-cli or custom-made (usually Webpack)

Installation

npm install buefy

Usage
Even though this is gonna import ALL components to your application, Buefy full bundle is optimized and still pretty small:
  • script is 32KB min+gzip
  • style is 28KB min+gzip (with bulma included)
Full bundle (recommended)
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

If you only need a couple of Buefy's components, might be a good idea to include individuals.

Bear in mind that every individual component has everything they need to work by themselves — including too many components individually will INCREASE your project's build size, adding the full bundle is recomended in that case.

In general, don't go over 3 components here. If you want more than that, add the full bundle.

Individual components as Vue plugins
import Vue from 'vue'
import Table from 'buefy/dist/components/table'
import Input from 'buefy/dist/components/input'
import 'buefy/dist/buefy.css'

Vue.use(Table)
Vue.use(Input)
Individual components
import Vue from 'vue'
import { Table } from 'buefy/dist/components/table'
import { Input } from 'buefy/dist/components/input'
import 'buefy/dist/buefy.css'

Vue.component('b-table', Table)
Vue.component('b-input', Input)

2

Standalone

Using CDN or downloading files to serve local

Installation


Usage example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>

<body>
    <div id="app">
        <!-- Buefy components goes here -->
    </div>

    <script src="https://unpkg.com/vue"></script>
    <!-- Full bundle -->
    <script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

    <!-- Individual components -->
    <script src="https://unpkg.com/buefy/dist/components/table"></script>
    <script src="https://unpkg.com/buefy/dist/components/input"></script>

    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

3

Nuxt.js

Using a Nuxt.js module to keep things easier

Installation

npm install nuxt-buefy

Usage

Add nuxt-buefy to modules section of nuxt.config.js:

{
    modules: [
        // Simple usage
        'nuxt-buefy',

        // Or you can customize
        ['nuxt-buefy', { css: false, materialDesignIcons: false }],
    ]
}

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub