This module is not yet compatible with Nuxt 3
Head over to v2.nuxt.com

buefy
nuxt-buefy

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

nuxt-buefy

npm (scoped with tag)npmCircleCICodecovDependenciesjs-standard-style

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

📖 Release Notes

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

TypeScript support

Add buefy/types to tsconfig.json:

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

Usage

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

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

or

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

Options

NameDescriptionTypeValuesDefault
css    Add buefy cssBooleantrue or falsetrue
materialDesignIconsAdd material design iconsBooleantrue or falsetrue
materialDesignIconsHRefSpecify material design icons versionStringAny CDN URL to MDIhttps://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css

You can use buefy construct options.

Customization

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

  1. If not already installed, install sass and sass-loader
npm i sass sass-loader@10 --save-dev
# or
yarn add --dev sass sass-loader@10
  1. Disable buefy css in module options:
{
  modules: [
    ['nuxt-buefy', { css: false }]
 ]
}
  1. Create a .scss file:
// Import bulma styles
@import "~bulma";

// Import buefy styles
@import "~buefy/src/scss/buefy";
  1. Define css property in nuxt.config:
{
  css: ['@/assets/scss/main.scss']
}

Development

  • Clone this repository
  • Install dependnecies using yarn install or npm install
  • Start development server using yarn run dev or npm run dev

License

MIT License

Copyright (c) Rafael Beraldo