2020-01-31に投稿

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のドキュメントを見てみてください。

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, React等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント