Nuxt3とtailwindcssでナビゲーションメニューを作った

目的

Nuxt3がリリースされたので遊んでみる。ページを追加してナビゲーションとヘッダーを作ります。

インストール

本家のインストール方法

npx nuxi init frontend
cd frontend
yarn install
yarn run dev

ページ

app.vue

<template>
  <div>
    <NuxtPage/>
  </div>
</template>

pages/index.vue

<template>
    <div>トップ</div>
</template>

pages/about.vue

<template>
    <div>アバウト</div>
</template>

tailwindcss

本家のインストール方法

yarn add --dev tailwindcss postcss autoprefixer
npx tailwindcss init

assets/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

pages/index.vue

<template>
    <div class="text-3xl font-bold underline">トップ</div>
</template>

yarn run dev

ヘッダーとナビゲーションを構築

components/Header.vue

<template>
  <div class="h-10 bg-green-900 text-yellow-500 flex items-center pl-3">
    <div>Nuxt3サンプル</div>
  </div>
</template>

components/Navigation.vue

<template>
  <div class="bg-gray-500 p-3 text-white flex flex-col items-center">
    <div><nuxt-link to="/">トップ</nuxt-link></div>
    <div><nuxt-link to="/about">アバウト</nuxt-link></div>
  </div>
</template>

app.vue

<template>
  <div class="flex flex-col h-screen">
    <Header />
    <div class="flex flex-grow">
      <Navigation />
      <NuxtPage/>
    </div>
  </div>
</template>

まとめ

Nuxtの作法に従うと簡単に複数ページやナビゲーションを付けることができました。ちょっとしたWebを作るのに気軽に使っていきたいです。