概要
Vue.jsを使う際にCSSのフレームワークを何にするかは、今のところスタンダード的なものは無いように思います。
JQueryを使っていた時代はBootstrap一択だったように思えますが、Vue.jsでBootstrapを使うにはJQueryが必要になってしまうため、いまいちスッキリしません。
そんな訳で今はBULMAを実験的に使ってみています。BULMAは純粋なCSSのみのフレームワークなので何にでも合わせることができますが、動きについては自分でコーディングしなければいけません。
タブの切り替えをVue.jsを使って行う
BULMAのページにはタブのスタイルについては定義がありますが、切り替え方については全く記載がなかったので、Vue.jsを使って切り替えて部分をコーディングしてみました。
特に難しいことはしていませんので、ほぼそのまま組み込むことができると思います。
See the Pen Vue + bulma tabs by jhanyu (@jhanyu) on CodePen.