Nuxt3、長らく RC だったのがようやく正式リリースされましたね。
早速試してみたんですが、テキストで Hello だけでは味気ないので、どうせならリアクティブ系 F/W と相性が良い Bulma と抱き合わせたやつにしてみようと思います。Free Bulma Templates という27種のテンプレートセットがあるので(下記)、この中の「Admin (Light)」を表示させる、というお題でやってみました。
上記 Github から一式をダウンロード・解凍します。今回はこの中の以下を使います。
bulma-templates-master/templates/admin.html bulma-templates-master/css/admin.css
では作業開始。npx で Nuxt3 プロジェクトを作成します。
npx nuxi init nuxt3-bulma-admin cd nuxt3-bulma-admin yarn install
後々のことを考えると、Bulma は CDN 参照じゃなくてローカルにインスコして SCSS でカスタマイズできるようしておきたいので、これに必要なモジュールをインストール。
yarn add --dev sass bulma @fortawesome/fontawesome-free
Font Awesome のウェブフォントは public/ ディレクトリ(旧 static/)にコピーしておきます。
mkdir public cp -r node_modules/@fortawesome/fontawesome-free/webfonts public/
以上をアプリで利用できるよう、assets/scss/index.scss を以下の内容で設置します。最後の v4-shims は、Admin テンプレート中で v4 のアイコンを使ってるみたいなので。通常は必要無いかと思います。
@charset "utf-8"; @import "../node_modules/bulma/bulma.sass"; $fa-font-path: "/webfonts" !default; @import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"; @import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss"; @import "../node_modules/@fortawesome/fontawesome-free/scss/regular.scss"; @import "../node_modules/@fortawesome/fontawesome-free/scss/v4-shims.scss";
Admin テンプレート用の CSS、bulma-templates-master/css/admin.css も assets/ にデプロイしておきます。
cp (Admin テンプレートを解凍した場所)/bulma-templates-master/css/admin.css assets/
さて、CSS まわりの準備が出来たので、pages/index.vue を作り、template タグの中に Admin テンプレート bulma-templates-master/templates/admin.html の body タグの中身をコピーします。最後の script タグは不要みたい。
<template> <!-- START NAV --> <nav class="navbar is-white"> <div class="container"> <div class="navbar-brand"> (中略) </div> </div> </div> </template>
上記ページのルーティングが有効になるよう、app.vue を以下のように書き換えます。
<template> <div> <NuxtPage /> </div> </template>
最後に設定を。nuxt.config.ts にて以下のように追記します。
export default defineNuxtConfig({ css: [ 'assets/scss/index.scss', 'assets/admin.css' ], app: { head: { title: 'Admin - Free Bulma template' } } })
以上です。yarn dev して以下が表示できればオケーイ。
