Nuxt 3でVue Toast Notificationを試した

プロジェクトフォルダを作成する

適当に「nuxt3-vue-toast-notification」をつくって試す。

/nuxt3-vue-toast-notification

npx nuxi@latest init .

質問に答える。

# 今回はnpmを使う
✔ Which package manager would you like to use?
npm

# はじめての場合はでるかも？
✔ Are you interested in participating?
No

# Gitリポジトリの初期化は今回どうでもいい
✔ Initialize git repository?
No

ちなみにnodeはv20.10.0で試しました。

Vue Toast Notificationを導入する

https://www.npmjs.com/package/vue-toast-notification

vue-toast-notificationをインストールする。

/nuxt3-vue-toast-notification

npm i vue-toast-notification

pluginsディレクトリを用意して、プラグインをつくる。

コメントを受けて、ファイル名を変更しました。

/nuxt3-vue-toast-notification

mkdir plugins
- touch plugins/toast.ts
+ touch plugins/toast.client.ts

/nuxt3-vue-toast-notification/plugins/toast.client.ts

import { useToast } from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-default.css'; // デフォルトのCSSを使う

export default defineNuxtPlugin((_nuxtApp) => {
  return {
    provide: {
      toast: useToast({
        position: 'top-right', // たとえば右上に表示する
        duration: 5000 // たとえば5秒間表示する
      })
    }
  };
});

使ってみる

app.vueに処理を書く。

/nuxt3-vue-toast-notification/app.vue

<script setup lang="ts">
  // onMountedを使う
  import { onMounted } from 'vue';

  // コンポーザブルからVue Toast Notificationを取得する
  const { $toast } = useNuxtApp();

  // コンポーネントがマウントされた後に..
  onMounted(() => {
    // 発火する
    $toast.success('成功です');
    $toast.error('エラーです');
    $toast.warning('警告です');
    $toast.info('お知らせです');
    $toast.default('デフォルトっていつ使うんだろう');
  });
</script>

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

VS Codeで「'$toast''は 'unknown' 型です。」という問題が表示される場合がありますが、npm run devによって.nuxtディレクトリが更新されることで消えるはずです。

実行する。

/nuxt3-vue-toast-notification

npm run dev

確認できた。

気になる点（解決済み）

コメントいただいたとおり、plugins/toast.client.tsというファイル名で作成することで、以下の警告は出なくなります。感謝。

npm run devすると以下の警告が出る。

Failed to load source map for vue-toast-notification. 

Stack Overflowには「無視で良い」というニュアンスの回答があった。
https://stackoverflow.com/questions/77528762/failed-to-load-source-map-for-vue-toast-notification-nuxt-3

そりゃそうな気がするけど、何かよい解決策はないのかな？とも思う。