rails×vueでポートフォリオ作成中の初学者の備忘録です。
vue上でフラッシュメッセージを表示できるライブラリの紹介です。

vue-flash-messageのインストール

https://www.npmjs.com/package/@smartweb/vue-flash-message/v/next
こちらのサイトからインストールできます。

npm i @smartweb/vue-flash-message@next

もしくは

yarn add  @smartweb/vue-flash-message@next

エントリーファイルは下記の通りです。

application.js

import FlashMessage from '@smartweb/vue-flash-message';
const app = createApp(App);
app.use(FlashMessage);

使い方

ユーザー登録フォームを送信し、成功ならルートURLにアクセス、成功メッセージの挿入、失敗ならページ遷移はせずに失敗メッセージを表示する場合を想定した場合の書き方です。

Singup.vue

.
.
.
.
 methods: {
      createUser: function () {
        axios.post('/api/users', {
          user: this.user
        })
        .then(response => {
          this.$router.push({ path: '/'}),
          this.$flashMessage.show({
            type: 'success',
            title: 'ユーザー登録が完了しました。',
            text:'アカウント有効化メールを送信しました。',
            time: 5000
          });
        })
        .catch(err => {
            this.$router.push({ path: '/users/new'}),
            this.$flashMessage.show({
              type: 'error',
              title: 'ユーザー登録に失敗しました',
              text: '入力内容に誤りがある可能性があります。',
              time: 5000
            });
        })
      }
    }

 this.$flashMessage.show({
              type: //メッセージの種類,
              title: //タイトルメッセージ,
              text: //メインメッセージ,
              time: //メッセージを表示する時間
            });

this.$flashMessage.showでメッセージの挿入が行えます。

[type:]には４種類のメッセージタイプから選択できます（success, error, info,warning)。

実際の表示はこちらから確認できますhttps://smwbtech.github.io/vue-flash-message/

title欄は省略可能です。

textにはメッセージ内容を挿入できます。

time欄も省略可能ですがメッセージをクリックすればデフォルトで消える仕様になっています。