phplaravel-8vuejs3toastr

How to use Laravel toaster package in Vue 3


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;
            }
        });
    }
}

Solution

  • 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;
            }
         });
      }
    }