Use Custom Event to Send HTTP Request After You Create the User in Laravel and Vuejs

Let's Build a Multi-Purpose Laravel + Vue Application is out now. In this series, you learn everything you need to know about Building a complete web application with Laravel and Vue js. So, I am so excited that so many of you guys like my content and keep inspiring me to create more videos. My goals is to inspire you to write better code and better applications.

Open Source At Github.

Here are the things you will learn in this series:

* How use Vue Router with Laravel
* How to Install AdminLTE 3
* How to Use Font Awesome 5 on Laravel
* How integrate mailchimp with laravel
* How to use Laravel Socialite
* How to Login Using Social Media
* How to Use API in Laravel
* Api Auth with Laravel Passport
* JWT with Laravel Passport and JavaScript Request
* Vue Custom Events
* Vue form with Laravel
* Relational Database with Laravel
* Axios and Ajax Request
* ACL in Laravel
* Online Users list
* And much more...

Tags:

JWT with Laravel,tutorial,coding,laravel,laravel and vue js tutorial,laravel and vuejs,laravel and vue js project,laravel admin panel,laravel adminlte,laravel admin,vue js tutorial,vue js,axios,laravel application development,learn laravel 5.6,learn laravel framework,laravel crud,laravel crud tutorial,spa,laravel how to,laravel tips,coding tips,admin lte laravel 5.6,adminlte with php,laravel api,laravel passport, hosting, cloud, web hosting

[samdeacon]

I have to say this is an amazing youtube series :-)

It is VERY involved with VUE JS to build even ONE CRUD section (like just Users is taking a long time) BUT I think this is a better way of working and once we have a FULL interface for USERS we can do other similar CRUD functionality and management on the backend.

[gonitech]

Dear sir,
The mediocre teacher tells. The good teacher explains. The superior teacher demonstrates. The great teacher inspires.
And the great is Code Inspire. Very very great thanks full for this tutorials. You are genius.

[elgeneralesso]

Hi Bro, I'm following you from the first lesson, and you're doing a good job. Thanks and keep going <3

[nruslanlab]

Your table not going to load the data without .then().catch

createUser() {
this.$Progress.start();
this.form.post('api/user')
.then(() => {
Fire.$emit('AfterCreate');
$('#addNew').modal('hide');
toast({
type: 'success',
title: 'User Created successfully'
});

this.$Progress.finish();
})
.catch(() => {
this.$Progress.fail()
});
}

Nice tutorials!!!

[bagusSetyawan]

my hobbit is when developing an app as a full stack,
i should write code to work first and after finish its time to review the code for upgrading performance or security, so keep going sir... (nice information in the end of video)

[tarunkmr]

Great tutorial. and if anybody's fire event is not working then you can simply use this.$emit and do use .then after post request and place your code inside .then

[Treyson]

Good Job bro, following from the first Lesson

[ahmedsaleh]

validation is work but when you made this progress bar and using custom event and then clicked create with same previous data it show toast added but it doesn't added so what should i do to solve this interface?

[remanbala]

To all those whose code is not working, use this:

[jendaeliasu]

Hi, thanks for your videos. I have a problem. I have the same code as you. If I save a new user I can see request with post and then request with get api/user. But in this request the new record is not included so the table is not updated. Where could be a problem? thanks

[tarunkmr]

There could be many people as Admin and opened same page at different computers so if one admin creates a user, so by using event the users list would update all opening windows of Admin?? Or do we have to use pusher for that?

[taslimsuman]

As I see it is not required to make custom event. I just call the this.loadUsers() after created the user. Its better to make it simple. Thanks for this nice tutorial series.

[nawrozalisalehi]

Dear Hujjat, Thank you for nice series, I completely followed this video but for me the custom event does not work, it also does not have any error. any comment please ? could no refresh(reload) the data.

[siriusly]

Great stuff here. Quick question. How do we clear the form after successful submit? Thank you in advance. Cheers.

[lapprentidev]

By my side, it takes to much time to this.form.post("api/user") to be execute, so the data is not saved in database before render.

The Solution i found, we wait to the response of the server :

createUser() {

this.$Progress.start();

=> {
this.loadUsers();
});

$("#addNew").modal("hide");

Toast.fire({
icon: "success",
title: "User created successfully !"
});

this.$Progress.finish();
}

[SunilparajuliKenshin]

Fantastic feature and explanation, I suppose I like to call route after the record was added, the route will be edit route of the same record which we have just created... I know the workaround at normal laravel and blade templates but I will use this event to change to my necessity. Can you recommend me what should i use in this case?

[heyyy]

Pusher work in database, server transforming relational database in realtime database like (firebase/firestore) I am think right? in this way, you just work in front end. tanks a lot.

[dsuryas]

Why do you create a new instance of Vue called Fire, can't we do the task with the same instance that we created first?

[zedmagdy]

why to get the user from the server when you are sending it from frontend that`s a waste of bandwidth you could just push the data you sent to the users array after making sure user has been created

[azamhossen]

The list users table is empty if i return User::all(); instead of return User::latest()->paginate(10);
Can you tell me the reason?