【Vue.js】トースト通知を作る方法｜イベントで表示・非表示を制御する簡易実装

Vue.jsを使えば、ユーザーに一時的なメッセージを表示する「トースト通知」も簡単に実装できます。本記事では、ボタンクリックなどのイベントを契機に表示し、数秒後に自動で消えるシンプルなトースト通知機能の作り方を紹介します。

トースト通知とは？
Vue.jsでの簡易トースト通知の実装例
実装のポイント
コンポーネント化のヒント
まとめ

トースト通知とは？

トースト通知（toast）は、画面の端などに一時的に表示される軽量なメッセージUIです。保存成功やエラー通知、コピー完了など、ページ遷移を伴わずにフィードバックを伝える際によく使われます。

Vue.jsでの簡易トースト通知の実装例

以下は、Vue 3（Composition API）を使ってトースト通知を実装した例です。

<template>
  <div class="app">
    <button @click="showToast('保存しました！')">通知を表示</button>

    <div v-if="isVisible" class="toast">
      {{ message }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);
const message = ref('');

const showToast = (msg) => {
  message.value = msg;
  isVisible.value = true;
  setTimeout(() => {
    isVisible.value = false;
  }, 3000); // 3秒で自動非表示
};
</script>

<style scoped>
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #333;
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
</style>