Vueのトースト（クリック不要のアラート）の実装

実装例

必要なコマンド

npm install @meforma/vue-toaster
npm install vue-toasted --save
npm install vue-toast-notification 
npm install vue-toast-notification@^3

トーストを追加する上での注意点

印刷プレビューについて

トーストは使用すると表示されてから、設定した時間で消失しますが
1度使用するとタグが残り続けます。
なので印刷プレビューに影響が出ることに留意してください。

src/main.js

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persistedstate';

import App from './App.vue'
import router from './router'
import './index.css'; // index.cssをインポート
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';

const app = createApp(App)
const pinia = createPinia();
pinia.use(piniaPersist); // persist プラグインを追加

app.use(pinia);
app.use(router);
app.use(VueToast);

app.mount('#app')

src/views/SideBar.vue

<template>
  <div>
    <label>サイドバー</label>
    
    <button
      @click="showSuccessToast"
    >ぼたん</button>

  </div>
</template>

<script>
import { ref, reactive, computed, watch, onMounted, toRefs,getCurrentInstance } from 'vue';

export default {
  name: "SideBar",
  setup() {

    const { proxy } = getCurrentInstance();
    const showSuccessToast = () => {
      if (!proxy || !proxy.$toast) {
        console.error("Toast instance is undefined. Ensure VueToast is properly registered.");
        return;
      }
      proxy.$toast.open({
        message: "操作が成功しました！",
        type: "success",
        duration: 5000,
      });
    };

    return {
      //----------------------------------//
      showSuccessToast,
      //---------------------------------//

    };
  },
};
</script>

<style>

</style>

実装内容 解説

    const { proxy } = getCurrentInstance();
    const showSuccessToast = () => {
      if (!proxy || !proxy.$toast) {
        console.error("Toast instance is undefined. Ensure VueToast is properly registered.");
        return;
      }
      proxy.$toast.open({
        message: "操作が成功しました！",  //表示する文字
        type: "success", //トーストのタイプ（）
        duration: 5000,
        position: "bottom-right", // トーストを画面右下に表示
      });
    };

[トーストの表示位置を変更]

トーストの表示位置は position オプションを使用して設定します。

利用可能な値:
"top": 画面の上部中央
"top-right": 画面の右上
"top-left": 画面の左上
"bottom": 画面の下部中央
"bottom-right": 画面の右下
"bottom-left": 画面の左下

[トーストの色を変更]

vue-toast-notification は
type によってスタイルを変更できます。デフォルトで利用可能な type の値は以下です。

デフォルトのタイプ:
"success": 緑色（成功）
"info": 青色（情報）
"warning": オレンジ色（警告）
"error": 赤色（エラー）