Nuxt3の自前ブログを使って、色々な機能を試して実装していきます。
最初にトースト機能を実装してみたいと思います。

↓作成したブログはこちら

動作環境

• Nuxt: 3.16.2
• @nuxt/ui: 3.0.2

全体構成

準備

1. NuxtUIとは

Nuxt UI は、Reka UI、Tailwind CSS、Tailwind Variants の強みを融合し、洗練された、アクセシブルで高パフォーマンスなユーザーインターフェースを構築するための、他に類を見ないツール群を開発者に提供します。

Nuxtに簡単にUIコンポーネントを組み込めるためのライブラリのことですね。

2. Nuxt UIの導入

2-1. Nuxt UIのインストール

プロジェクトのルートディレクトリで以下のコマンドを実行します。

npm install @nuxt/ui

package.jsonに次のように追加されているはずです。

{
  ...
  "dependencies": {
    ...
    "@nuxt/ui": "^3.0.2", # 追加されている
    ...

2-2. nuxt.config.tsに設定追加

そして次にnuxt.config.tsを編集します。

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
});

2-3. CSSの編集

プロジェクト全体で使用しているcssファイルを指定します。

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'] // 追加
})

そしてそのcssファイルでtailwindとNuxt UIのインポートをします。

@import "tailwindcss";
@import "@nuxt/ui";

2-4. app全体をApp Componentで囲う

プロジェクト全体でToastやTooltipを使用できるようにするための設定です。

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

私のプロジェクトではNuxtLayoutを使用しているので、このような実装となりました。

<template>
  <UApp>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
</template>

これでトースト機能を実装する準備が整いました。

実装

まずは

<script lang="ts" setup>
const toast = useToast();

function showToast() {
  const props = {
    title: 'ブログにようこそ！',
  };
  toast.add(props);
};

// ページを初期表示したときに呼び出す
onMounted(() => {
  showToast();
});
</script>

まずはuseToast関数を使用してtoastを生成します。

その次にtoastのadd関数にオブジェクトを渡します。
他にも細かい制御（アイコンやクローズボタンなど）もできるので、以下を参考にしてください。

ブログを表示する際にtoastが表示されるようになりました🎉

さいごに

Nuxt UI他にも多くのIconを用意していたり、ColorModeを設定できたりするようなので、少しずつ機能を足していきたいと思います。