nuxt-buefy

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/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:

• 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

• Disable buefy css in module options:

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

• Create a .scss file:

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

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

• 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