共通cssの作成と読み込み今回はcssフレームワークのBulmaの導入と、メニュー開閉の実装に関することを書きます。Bulmaとは?Bulmaはcssフレームワークの1つです。他に代表的なcssフレームワークといえばBootstrapですが、最近は必要最低限の軽量CSSフレームワークを使い、ある程度自分でスタイル作成・カスタマイズしていくのが主流となっています。Skeletonなどがありますね。僕は最近の制作はほとんどBulmaを採用しています。flexレスポンシブデザインや面倒なヘッダー(ナビゲーションバー)などをサクっと作るためのライブラリです。自分で作るよりも遥かに早く正確に作る事ができるので、cssフレームワークは制作のベースに導入する事を強くオススメします。FlexboxBulmaのセットアップまずはnpmでインストールします。bulma次にnuxt.config.jsに追加するのですが、カスタマイズしないとBulmaそのままなので、自分でassets/cssディレクトリ内にbulma.scssを作成します。"~bulma/bulma";この辺りはドキュメントを見ながら変数をカスタマイズしていく感じですね。書けたらnuxt.config.jsのcssで読み込みます。]}Navbarを設置してみるさっそくnavbarを設置してみます。公式サイトにあるnavbarのコードをそのままゴソっとコピーしてきます。Flexboxそれをcomponents/Navbar.vueを作成してペーストします。</div></nav></template>そして、pages/index.vueでNavbar.vueを呼び出します。}}</script>そしてブラウザを確認してみると無事表示されました。メニューの開閉を実装するさて、次はメニューの開閉です。Nuxt.jsやVue.jsを使わない環境ではシンプルなjsをこんな感じで書いていました。toggle_menuしかし、これはNuxt.js(というかVue.js)ではうまく動きません。メニューの開閉にはVue.jsの方法で実装する必要があります。いっても、要はtrue/falseを切り替える変数とメソッドを用意してあげれば良いだけです。routerを使うと、ページが変わってもメニューが開きっぱなしという問題が発生します。そこでページの遷移を検知し、menuOpenedをfalseにしてあげる必要があります。falseしてあげる感じですね。これでちゃんとページ遷移したらメニューを閉じてくれます。次はmarkdownでページの作成とパーマリンクに関することを書きます。