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

npm i nuxt-buefy

パッケージを読み込む

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

今回は、cssのみfalse。

nuxt.config.js

module.exports = {
  modules: [
    ['nuxt-buefy', {
      css: false,
      // materialDesignIcons: false
    }],
  ],
}

表示テスト

index.vue

<template>
  <section class="container">
    <b-switch>switch</b-switch>
  </section>
</template>

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

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

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

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

terminal

// pug
npm i pug pug-loader pug-plain-loader

// scss
npm i node-sass sass-loader

基準となる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に読み込む

nuxt.config.js

module.export = {
  css: [
    '~/assets/css/buefy.scss',
  ],
  ...
}

表示確認

これでOK。COOL！

おまけ

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