Start

Three ways to install and use Buefy

# Icons

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

Material Design Icons CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/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.

# 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 going to import ALL components to your application, Buefy full bundle is optimized and still pretty small:
  • script is 48KB min+gzip
  • style is 39KB min+gzip (with bulma included)
Full bundle
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://cdn.jsdelivr.net/npm/buefy/dist/buefy.min.css">
</head>

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

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- Full bundle -->
    <script src="https://cdn.jsdelivr.net/npm/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