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パッケージをインストール
npm i nuxt-buefy
パッケージを読み込む
nuxt.config.jsでパッケージを読み込む。css(scss)やマテリアルデザインアイコンを別で使いたい場合は、falseに設定することで、プロジェクトに合わせた運用が可能になる。
今回は、cssのみfalse。
module.exports = {
modules: [
['nuxt-buefy', {
css: false,
// materialDesignIcons: false
}],
],
}
表示テスト
<template>
<section class="container">
<b-switch>switch</b-switch>
</section>
</template>
OK。コンポーネントは読み込まれました。
Buefyのcssをコントロールしたい
Buefyはsassで出来ているので、sassを使えるようにする。ついでにpugもインストール。
sass&pugパッケージインストール
// pug
npm i pug pug-loader pug-plain-loader
// scss
npm i node-sass sass-loader
基準となるscssファイルを作成
公式ドキュメント-カスタマイズの項を参考に、基本情報をいじれるようにしておく。とりあえず利用者が多い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に読み込む
module.export = {
css: [
'~/assets/css/buefy.scss',
],
...
}
表示確認
これでOK。COOL！
おまけ
IE11でb-switchやb-radioの:before要素が表示されないので、display:blockを追加しておく。
//...
.radio,
.switch{
.check:before {
display: block;
}
}
カスタマイズや調整ができることは重要。ありがたい。
ドキュメント
を参考に。また、scssのカスタマイズは「Bulma公式ドキュメント - 変数の項」を参考にするといい。
第２段：Buefy(Bulma)のカスタマイズをしてみる。（予定）