Nuxt3 で Basic 認証と Bootstrap の環境をひとまず用意するメモです。
方針
ゆくゆくは Vercel や Heroku などに置く前提で、なるべくシンプルに Nuxt3 で Basic 認証と Bootstrap の環境をひとまず用意します。
仕事でちょっとしたツールを公開するけど、みんながアクセスできる仕組みだと困るので Basic 認証は入れとくというニュアンスです。
- Nuxt 3.5.3
- Bootstrap 5.3.0
で、すすめます。
Nuxt 作業フォルダをつくる
Installation · Get Started with Nuxt この辺りを参考に、
npx nuxi@latest init my-project
のように作ります。my-project フォルダの中に一式作られたら、
cd my-project
で、作業ディレクトリ移動。
プロジェクト直下に作りたいとき
npx nuxi@latest init . --force
いま動かしているプロジェクト直下に作りたいときにこれをやりました。.git のようなフォルダがあっても、強制的に直下フォルダに作れます。
インストール
npm i
こちらのコマンドで、一式インストール。
Basic 認証の導入
Nuxt 3 の Basic 認証モジュールを作成する の記事を参考に、nuxt-basic-authentication-module を知りました。
npm i nuxt-basic-authentication-module
こちらでインストールして準備します。
Bootstrap の準備
npm i bootstrap-icons-vue bootstrap
Bootstrap は本体もアイコンもインストールして準備します。
config の変更
Bootstrap も nuxt-basic-authentication-module も機能させるために、以下のように設定します。
Bootstrap の導入は Nuxt3＋Bootstrap5 導入手順 を参考にしました。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true }
})
こちらを。
↓
import BasicAuth from 'nuxt-basic-authentication-module'
export default defineNuxtConfig({
devtools: { enabled: true },
css: ["bootstrap/dist/css/bootstrap.min.css"],
modules: [
[BasicAuth, { enabled: true }],
],
runtimeConfig: {
basicAuth: {
pairs: {
'admin': 'password',
},
},
},
})
こんな風に。Basic 認証の ID / PASS はこのままだと admin / password になってしまうので、自分の環境に合わせて変えてください。
app.vue 変更
Bootstrap が効くようになったので app.vue を変更します。
<template>
<div>
<NuxtWelcome />
</div>
</template>
こちらを。
↓
<template>
<div class="container">
<NuxtPage />
</div>
</template>
こんな風に。NuxtPage を呼び出しつつ、Bootstrap 用の <div class="container"> 入れます。
pages フォルダ作成
ページ遷移を作るので、pages フォルダを作ります。
mkdir pages
こちらのコマンドを実行。もちろん VSCode などでフォルダを作っても構いません。
pages/index.vue 作成
pages の中に index.vue を作って以下のような内容にします。
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { BIconHandThumbsUpFill } from 'bootstrap-icons-vue';
const count = ref(0)
const increment = () => {
count.value++;
};
onMounted(() => {
})
</script>
<template>
<div class="row">
<div class="col">
<h1>Sample</h1>
</div>
</div>
<div class="d-flex">
<div>
<button type="button" class="btn btn-primary" @click="increment"><BIconHandThumbsUpFill /> {{count}}</button>
</div>
</div>
</template>
Bootstrap の見た目をうまく呼びだしつつ、カウントアップしている仕組みです。
テストサーバ
ここまでできたらテストサーバで確認してみましょう。
npm run dev
起動したサーバーのトップページを確認します。
でてきました。
Basic 認証もうまく表示されたので、ID / PASS を入れて入ります。
このように表示されます。まだカウントは 0 です。
ボタンをクリックするとどんどんカウントが増えます。
Nuxt で遷移機能などそろえてくれていて、入れるべきモジュールもほとんど悩まず、Bootstrap の適用もやりやすかったです。
すぐスタートできる感じがよいですね！