nuxt-buefy

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

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.

Customization

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

0. 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 }]
 ]
}

2. Create a .scss file:

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

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

3. 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