How to use Laravel toaster package in Vue 3

user_8747052 0
Viewed 437

I'm working in a project which is made in Laravel 8 and Vue 3. I use this Laravel toastr package:

composer require yoeunes/toastr

This toaster works very fine in Laravel Controller but the problem is I don't know how to call this toaster in a vue axios function.

How can I make this toastr Global? so that I can use it in both Laravel and Vue.js sides?

I would be very happy if you could help me with this.

Vue function:

methods: {
    submit() {
        axios.post('/login', this.fields)
            .then(response => {
                if (response.status === 200) {
                // Hier comes 'welcome message' 
                toastr()->success('you are logged in');
                }
            }).catch(error => {
            if (error.response.status === 401) {
                this.errors = error.response.data.errors;
            }
        });
    }
}
toastr laravel-8 vuejs3 php
2 Answers

I have solved the problem! :-)

In laravel controllers this package works fine for me.

composer require yoeunes/toastr

To make toastr Global so it works in Vue.js as well, I have installed toastr package via npm as follow!

npm install toastr --save
npm run dev

Then I have registered it in bootstrap.js

window.toastre = require('toastr');

and then I could call him in my vue axios function!

methods: {
   submit() {
      axios.post('/login', this.fields)
         .then(response => {
            if (response.status === 200) {
               this.fields = {};
               this.errors = {};
               this.success = true;
               toastr.success('you are logged in');
               
           }
        }).catch(error => {
        if (error.response.status === 401) {
           this.errors = error.response.data.errors;
        }
     });
  }
}
user_87470520

I think you should declare a global variable and assign 'this' to it because whenever you call 'this' inside your axios it refers to response. Then, call the declared gloabal variable inside your axios function:

methods: {
    submit() {
        var gloabl_this = this;
        axios.post('/login', this.fields)
            .then(response => {
                if (response.status === 200) {
                // Hier comes 'welcome message' 
                global_this.toastr()->success('you are logged in');
                }
            }).catch(error => {
            if (error.response.status === 401) {
                this.errors = error.response.data.errors;
            }
        });
    }
}

Hope this works for you, and please let me know if it still gives any error.

user_77115130
Related