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="https://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)
Individual components as Vue plugins
import Vue from 'vue'
import { Table, Input } from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Table)
Vue.use(Input)

2

Standalone

Using CDN or downloading files to serve local

Installation

Just download or use these as CDN:

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