昨天使用Modal的體驗不錯，解救了我文章差點難產的困境，所以今天再來加個料，免得開天窗；
Modal雖然不錯用，但有時我們只是要做個確認而已，使用Modal著重在表單這一類資料處理上，而簡單的通知使用Alert就可以了，但是瀏灠器的預設Alert真的醜，所以有不少的Alert套件就是在改善這一點，我比較常接觸的是SweetAlert這一套。

直接安裝支援vue3的sweetalert:

npm install -S vue-sweetalert2

在Vue App中註冊使用SweetAlert
resources\js\app.js

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createPinia } from 'pinia'
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import { vfmPlugin } from 'vue-final-modal';

//引入SweetAlert及其附帶的css
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
const pinia = createPinia()
createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(pinia)
            .use(vfmPlugin)
            .use(VueSweetalert2)  //在app中註冊使用SweetAlert
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

感謝邦友指正，vue-sweetalert2 有說明，如果是在Vue3的composition API中的話，可以直接調用SweetAlert2來使用，不需要安裝 vue-sweetalert2
就是省略上面的步驟，直接安裝 SweetAlert2 然後在需要的SFC中import Swal 來使用就可以了，就是下面的用法。

SweetAlert官網有很多應用情境的範例，找一個適用的來用就可以很快上手，特殊用途就自己花點時間看一下文件。

我是打算把原本的刪除功能增加Alert的提示，所以把原本的 Link 改成 button 並掛上點擊事件：
resources\js\Pages\Backstage\Banks.vue

<Link :href="route('bank.destroy', bank.id)" 
    method="delete" 
    as="button">刪除</Link>

    改成

<button @click="delBank(bank)">刪除</button>

然後在js中增加SweetAlert的Confirm視窗，並通知後端資料刪除：
resources\js\Pages\Backstage\Banks.vue

.....略
import Swal from "sweetalert2"; //引入SweetAlert
import { Inertia } from "@inertiajs/inertia";  //引入Inertia

.....略
const delBank=(bank)=>{
  Swal.fire({
    //alert視窗內容設定
    title:"刪除"+bank.name+bank.levelC,
    text:"如果題庫內有題組或題目將無法刪除",
    showCancelButton:true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '確定刪除!'
  }).then(result=>{
    if (result.isConfirmed) {
      //確定刪除的話，向後端傳遞刪除的資料，並更新前端頁面
      Inertia.delete(route('bank.destroy', bank.id),{
        onFinish:()=>{
            
          //前端頁面更新完成後，再次彈出確認視窗
          Swal.fire(
            '刪除成功',
            '題庫'+bank.name+bank.levelC+'已刪除',
            'success'
          )
        } 
      })
    }
  })
}

雖然也看過不少直接把 SweetAlert 拿來當 Modal 用的範例，但我個人是覺得在使用的情境上最好還是有所區隔比較好，訊息的提示之類的用 SweetAlert，資料及表單的處理用 Modal。

以上就是用別人做好的套件所帶來的輕鬆愉快的體驗，之後就照這個模式來讓操作回饋可以更活潑一些。