Nuxt3 で Basic 認証と Bootstrap の環境をひとまず用意するメモ

Posted on 2023-06-29

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 /> </button>
    </div>
  </div>
</template>

Bootstrap の見た目をうまく呼びだしつつ、カウントアップしている仕組みです。