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

<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)
}
</script>

<template>
  <button @click="showToast('保存しました！')">通知を表示</button>
  <div v-if="isVisible" class="toast">{{ message }}</div>   <!-- ← 要素ごと出し入れ -->
</template>

// composables/useToast.js
import { ref } from 'vue'

// 関数の「外」に置くので、どこから呼んでも同じ一覧を共有する
const toasts = ref([])
let nextId = 1                       // Date.now() ではなく連番（同時に作っても重複しない）

export function useToast() {
  function show(message, { type = 'info', duration = 4000 } = {}) {
    const id = nextId++
    toasts.value.push({ id, message, type, duration })
    return id
  }

  function remove(id) {
    toasts.value = toasts.value.filter((toast) => toast.id !== id)
  }

  return {
    toasts,
    show,
    remove,
    success: (message, options) => show(message, { ...options, type: 'success' }),
    // エラーは読むのに時間がかかるので、長めに表示する
    error: (message, options) => show(message, { duration: 8000, ...options, type: 'error' })
  }
}

<!-- ToastItem.vue：1つのトースト。自分のタイマーを自分で管理する -->
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  toast: { type: Object, required: true }
})
const emit = defineEmits(['close'])

let timerId = null
let remaining = props.toast.duration   // 残り時間
let startedAt = 0

function start() {
  if (timerId !== null) return
  startedAt = Date.now()
  timerId = setTimeout(() => emit('close'), remaining)
}

// ホバーやフォーカス中は、タイマーを止めて、残り時間を覚えておく
function pause() {
  if (timerId === null) return
  clearTimeout(timerId)
  timerId = null
  remaining -= Date.now() - startedAt
}

onMounted(start)
onBeforeUnmount(() => clearTimeout(timerId))   // 破棄されるときは、必ずタイマーを片付ける
</script>

<template>
  <div
    class="toast"
    :class="`toast--${toast.type}`"
    :role="toast.type === 'error' ? 'alert' : undefined"
    @mouseenter="pause"
    @mouseleave="start"
    @focusin="pause"
    @focusout="start"
  >
    <span>{{ toast.message }}</span>
    <button type="button" aria-label="通知を閉じる" @click="emit('close')">×</button>
  </div>
</template>

<!-- ToastContainer.vue：アプリに1つだけ置く -->
<script setup>
import { useToast } from './composables/useToast'
import ToastItem from './ToastItem.vue'

const { toasts, remove } = useToast()
</script>

<template>
  <Teleport to="body">
    <!-- このコンテナは、トーストが無いときも DOM に存在する。
         role="status" の領域に追加された内容が、読み上げられる -->
    <div class="toast-container" role="status">
      <TransitionGroup name="toast">
        <ToastItem
          v-for="toast in toasts"
          :key="toast.id"
          :toast="toast"
          @close="remove(toast.id)"
        />
      </TransitionGroup>
    </div>
  </Teleport>
</template>

<style>
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}
.toast {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.8rem 1.2rem;
  color: #fff;
  background: #333;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.toast--success { background: #2e7d32; }
.toast--error { background: #c62828; }
.toast button { color: inherit; background: none; border: none; cursor: pointer; }

/* TransitionGroup のクラス。v-if で消えるので、ここで初めてフェードが効く */
.toast-enter-active,
.toast-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

<!-- App.vue：ToastContainer を、1度だけ置く -->
<script setup>
import ToastContainer from './components/ToastContainer.vue'
</script>

<template>
  <RouterView />
  <ToastContainer />
</template>

<script setup>
import { useToast } from '@/composables/useToast'

const toast = useToast()

function save() {
  toast.success('保存しました')
}
function fail() {
  toast.error('保存に失敗しました。もう一度お試しください。')
}
</script>

<template>
  <button type="button" @click="save">保存</button>
  <button type="button" @click="fail">失敗させる</button>
</template>