nuxt-buefy

It's really very simple to start with nuxt. But we can make it even simpler by adding nuxt-buefy

It's really very simple to start with nuxt. But we can make it even simpler by adding nuxt-buefy.

Install

If you create new project from scratch, just choose buefy right from create-nuxt-app!

For already existing project just:

npm i nuxt-buefy
# or
yarn add nuxt-buefy

Add buefy/types to tsconfig.json:

{
  "compilerOptions": {
    "types": [
      "buefy/types"
    ]
  }
}

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

    ['nuxt-buefy', { /* buefy options */ }]
 ]
}

{
  modules: [
    // Simple usage
    'nuxt-buefy',
 ],
 buefy: { /* buefy options */ }
}

Name	Description	Type	Values	Default
`css`	Add buefy css	Boolean	`true` or `false`	`true`
`materialDesignIcons`	Add material design icons	Boolean	`true` or `false`	`true`
`materialDesignIconsHRef`	Specify material design icons version	String	Any CDN URL to MDI	`https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css`

You can use buefy construct options.

If you're familiar with Sass and want to customize Buefy with your own theme, follow these steps:

npm i sass sass-loader@10 --save-dev
# or
yarn add --dev sass sass-loader@10

{
  modules: [
    ['nuxt-buefy', { css: false }]
 ]
}

// Import bulma styles
@import "~bulma";

// Import buefy styles
@import "~buefy/src/scss/buefy";

{
  css: ['@/assets/scss/main.scss']
}