[Nuxt.js]@nuxtjs/toastを利用してトーストを表示する

はじめに

@nuxtjs/toastを利用してトーストを実装したので備忘録として残しておきます。

環境

• Vue：2.6.14
• Nuxt.js：2.15.8
• @nuxtjs/toast：3.3.1

目次

1.モジュールの概要
2.導入手順
3.サンプル
4.参考記事

1. モジュールの概要

手軽にトーストを実装できるモジュールです。

2. 導入手順

インストール

npm install @nuxtjs/toast --save

モジュールを登録する

nuxt.config.jsのmodulesに追記します。

nuxt.config.js

//略
modules: [
   '@nuxtjs/toast',
],
toast: {
    position: 'top-center',
    duration: 4000
  }
],
//略

position、duration以外にもオプションがあるので、手軽にカスタマイズすることができます。

実装例

下記のようにして、表示します。

成功時

this.$toast.success("成功！！！")

失敗時

this.$toast.success("失敗！！！")

3. サンプルコード

以前作成したログインページにトーストを実装しました。

pages/login.vue

<template>
  <v-card max-width="500" class="mx-auto mt-5 full-width" flat outlined>
    <v-card-title class="text-center pa-8">
      <h1 class="text-h5 font-weight-bold full-width">ログイン情報入力</h1>
    </v-card-title>
    <v-divider> </v-divider>
    <div class="px-6 py-8">
      <div style="max-width: 336px" class="mx-auto">
        <v-card-text>
          <v-form ref="login_form" @submit.prevent="doLogin">
            <EmailInput :email.sync="form.email" />
            <PasswordInput :password.sync="form.password" />
            <v-card-actions>
              <v-row justify="end" class="pb-8 pt-4">
                <BaseButton :color="btnColor">ログイン</BaseButton>
              </v-row>
            </v-card-actions>
          </v-form>
        </v-card-text>
        <v-divider></v-divider>
        <div class="pt-8 pb-4">
          <span>パスワードをお忘れですか？</span>
          <nuxt-link to="/forgot-password">パスワードをリセットする</nuxt-link>
        </div>
      </div>
    </div>
  </v-card>
</template>
<script>
import BaseButton from '../../atoms/buttons/BaseButton.vue'
import EmailInput from '../../atoms/inputs/EmailInput.vue'
import PasswordInput from '../../atoms/inputs/PasswordInput.vue'
export default {
  components: { EmailInput, PasswordInput, BaseButton },
  data() {
    return {
      btnColor: 'indigo accent-2',
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async doLogin() {
      if (this.$refs.login_form.validate()) {
        try {
          await this.$auth.loginWith('laravelSanctum', {
            data: this.form
          })
          this.$router.push('/')
          this.$toast.success('ログインに成功しました。') //追加
        } catch {
          this.$toast.error('ログインに失敗しました。') //追加
        }
      }
    }
  }
}
</script>
<style scoped>
.full-width {
  width: 100%;
}
</style>

以上で実装完了です。

4. 参考文献