Start

One 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/font@5.8.55/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 3.0+.

# 1

NPM or Yarn (recommended)

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

Installation

npm install @fantage9/buefy-vue3

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 { createApp } from 'vue'
                import Buefy from '@fantage9/buefy-vue3'
                import '@fantage9/buefy-vue3/dist/buefy.css'

                const app = createApp()

                app.use(Buefy)
                
Individual components as Vue plugins

                import { createApp } from 'vue'
                import { Table, Input } from '@fantage9/buefy-vue3'
                import '@fantage9/buefy-vue3/dist/buefy.css'

                const app = createApp()

                app.use(Table)
                app.use(Input)