nuxtjs/toastとelement-uiのnotifyの実装

nuxtjs/toastの場合

参考URL

github.com

インストール

yarn add @nuxtjs/toast

設定

  modules: [
    '@nuxtjs/toast'
  ],
  toast: {
    // 右上にtoastを表示
    position: 'top-center',
    // 特に指定しなくても5秒で消えるように設定
    duration: 5000
  }    

実装

  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$toast.show('Logging in...')
          axios.post('http://localhost/register', this.entryForm).then((response) => {
            this.$toast.success('ユーザー登録に成功しました。')
          }).catch((err) => {
            console.log(err)
            this.$toast.error('ユーザー登録に失敗しました。')
          })
        } else {
          alert('登録に失敗しました')
          console.log('error submit!!')
          return false
        }
      })
    },

実行画面

element-uiの場合

• 追加でパッケージをインストールする必要もなく、設定ファイルにも何も書かなくても動作する

実装

    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost/register', this.entryForm).then((response) => {
            this.$notify({
              title: 'ユーザー登録',
              message: 'ユーザー登録に成功しました。',
              type: 'success'
            })
          }).catch((err) => {
            this.$notify.error({
              title: 'ユーザー登録',
              message: 'ユーザー登録に失敗しました。'
            })
          })
        } else {
          this.$notify.error({
            title: '入力項目チェック',
            message: '入力項目が不備があります。'
          })
          return false
        }
      })
    },

実行結果