🔔

Nuxt 3でVue Toast Notificationを試した

2024/03/13に公開

Nuxt 3

tech

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

適当に「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

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

/nuxt3-vue-toast-notification/plugins/toast.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>

実行する。

/nuxt3-vue-toast-notification

npm run dev

確認できた。

気になる点

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

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

Stack Overflowには「無視で良い」というニュアンスの回答があった。

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

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

Vue Toast Notificationを導入する

使ってみる

気になる点

Discussion