nuxt.js(v2)へBuefyを入れた。全部入れでOKだった…嬉しい。

# Buefyの利点は「全部入れ！」

nuxt.jsで使えるUIフレームワークの中でBuefyがちょうどよかった。備忘録として調べたことをメモ。
まずは利点を整理。デザインは好みなので選定理由から外すとして（個人的にはデザインも好き）…大きくは３つ。

- 導入(カスタム)が楽
- SSR対応
- **全部入れ！**

まず、「導入が楽」と「SSR対応」はnuxt.jsが公式に対応しているUIフレームワークならばどれもさほど変わらない。大事なのは「全部入れ！」の部分。

UIフレームワークを導入するときに一番悩むのがデーター量が重くなること。なので、どのUIフレームワークも必ず個別でコンポーネントを導入できるようになっている。もちろんBuefyでも個別対応できるのだけど…**「使うコンポーネントが２以下の場合は個別に。３つ以上ならば全部。」**と公式ドキュメントに…３つ以上？

フォーム部品だけで軽く３つを超える…つまりは、基本は**全部入れ！**悩まなくていい！！GOOOOD！

>
If you only need a couple of Buefy's components, might be a good idea to include individuals.
Buefyのコンポーネントが2つだけ必要な場合は、個を含めることをお勧めします。
>
...中略
>
In general, don't go over 3 components here. If you want more than that, add the full bundle.
一般的に、3つ以上のコンポーネントは置かないでください。それ以上必要な場合は、完全なバンドルを追加してください。
>
参考：https://buefy.github.io/documentation/start/




## Buefyを導入

前置きが長くなったけど、buefyを入れていきます。
コンポーネントとcssは分けていれておいて、あとからカスタマイズできるようにしておきます。

### nuxt-buefyパッケージをインストール

```terminal:terminal
npm i nuxt-buefy
```

### パッケージを読み込む

nuxt.config.jsでパッケージを読み込む。css(scss)やマテリアルデザインアイコンを別で使いたい場合は、falseに設定することで、プロジェクトに合わせた運用が可能になる。

今回は、cssのみfalse。

```javascript:nuxt.config.js
module.exports = {
  modules: [
    ['nuxt-buefy', {
      css: false,
      // materialDesignIcons: false
    }],
  ],
}
```
### 表示テスト

```vue:index.vue
<template>
  <section class="container">
    <b-switch>switch</b-switch>
  </section>
</template>
```

<img width="227" alt="nuxt-after-buefy 2018-12-05 10-21-20.png" src="https://qiita-image-store.s3.amazonaws.com/0/217743/54f4b241-2bf5-82ab-a6c4-9ca4cbf4b702.png">

OK。コンポーネントは読み込まれました。

## Buefyのcssをコントロールしたい

Buefyはsassで出来ているので、sassを使えるようにする。~~ついでにpugもインストール。~~

### sass&pugパッケージインストール

```terminal:terminal
// pug
npm i pug pug-loader pug-plain-loader

// scss
npm i node-sass sass-loader
```

### 基準となるscssファイルを作成

[公式ドキュメント-カスタマイズの項](https://buefy.github.io/documentation/customization)を参考に、基本情報をいじれるようにしておく。とりあえず利用者が多いscssで作成。

```scss:assets/css/buefy.scss
// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: #8c67ef;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
    "white": ($white, $black),
    "black": ($black, $white),
    "light": ($light, $light-invert),
    "dark": ($dark, $dark-invert),
    "primary": ($primary, $primary-invert),
    "info": ($info, $info-invert),
    "success": ($success, $success-invert),
    "warning": ($warning, $warning-invert),
    "danger": ($danger, $danger-invert),
    "twitter": ($twitter, $twitter-invert)
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
```

### nuxtに読み込む

```javascript:nuxt.config.js
module.export = {
  css: [
    '~/assets/css/buefy.scss',
  ],
  ...
}
```

### 表示確認

<img width="261" alt="nuxt-after-buefy 2018-12-05 10-25-32.png" src="https://qiita-image-store.s3.amazonaws.com/0/217743/143fa043-9db5-b0a2-c50e-3c43fefefd3c.png">

これでOK。COOL！

## おまけ

IE11でb-switchやb-radioの:before要素が表示されないので、display:blockを追加しておく。

```scss:assets/css/buefy.scss
//...
.radio,
.switch{
  .check:before {
    display: block;
  }
}
```

カスタマイズや調整ができることは重要。ありがたい。

## ドキュメント

- デザイン関連は、[Bluma](https://bulma.io/documentation/)のドキュメント
- コンポーネント関連は、[Buefy](https://buefy.github.io/documentation)のドキュメント

を参考に。また、scssのカスタマイズは「[Bulma公式ドキュメント - 変数の項](https://bulma.io/documentation/customize/variables/)」を参考にするといい。

第２段：Buefy(Bulma)のカスタマイズをしてみる。（予定）