Laravel+Vue.jsでToastを使ったフラッシュメッセージを表示する

LaravelとVue.jsで開発していると「更新しました」といったフラッシュメッセージを表示したい時があります。ただ、表示用のデザインが提供されているわけでもないし、全部のページに表示用の記述を入れたくないのでなるべく共通テンプレート内だけに書いておきたい、でもそれだと微妙に変な位置になってしまってかっこ悪くなる、というパターンもあります。

そんな時、トーストを使うと場所を気にしなくていいし、時間が経つと勝手に消えてくれるため、じゃまにならずにわかりやすいメッセージを表示することができるので便利です。

使用するプラグイン

今回は下記のVue.js用に作成されているプラグインを利用しました。

shakee93/vue-toasted: 🖖 Responsive Touch Compatible Toast plugin for VueJS 2+

まずはインストールします。

yarn add vue-toasted

そしてapp.ts等で利用するための設定を行います。

import Toasted from 'vue-toasted'

Vue.use(Toasted)

これで準備は完了です。あとはVueコンポーネント内で下記のような感じで呼び出すことが出来ます。

this.$toasted.show('hello billo')

TypeScriptを利用している場合はちゃんと上記も定義してくれているっぽいです。

表示用のコンポーネントを作成

さて、実際に $toasted.showを実行するだけのVueコンポーネントを作成します。そのようにすることで、通常のLaravelのフラッシュメッセージを表示するときと同様、そのフラッシュメッセージが存在する時にそのコンポーネントを配置するだけで勝手にメッセージを表示できるようになります。

今回は下記のようなToast.tsというファイルでコンポーネントを作りました。テンプレートは利用していないのでtsファイル等で構いません。（JavaScriptの場合は適宜型などを外せばそのまま使えると思います）

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class Toast extends Vue {
  @Prop(String) message!: string
  @Prop({ type: String, default: 'default' }) type!: string

  mounted() {
    this.$toasted.show(this.message, {
      type: this.type,
      duration: 5000,
      position: 'bottom-left'
    })
  }

  render() {
    return ''
  }
}

あとはapp.jsで new Vueする際にcomponentsパラメータの中に上記のコンポーネントを含ませれば利用できるようになります。

共通テンプレート内でVueコンポーネントを動作させられる箇所（例えば#app内など）に下記のように配置すればフラッシュメッセージが表示されるようになります。

@if (Session::has('success'))
<toast message="{{ session('success') }}" type="success"></toast>
@endif

typeはvue-toastedにそのまま渡しているだけですが、いくつかあるようなので増やしたい場合はvue-toastedのドキュメントを見てみてください。