Skip to content

buefy/nuxt-buefy

Repository files navigation

nuxt-buefy

npm (scoped with tag) npm CircleCI Codecov Dependencies js-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

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/font@5.8.55/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