Home Laravel Vue Laravel Tutorial Part 6 – Form Submission

Vue Laravel Tutorial Part 6 – Form Submission

by therichpost
Vue Laravel Tutorial Part 6 – Form Submission

Hello to all, welcome to therichpost.com. In this post, I will continue with Vue Laravel Tutorial Part 6 – Form Submission.

Form Submission is the very important part of every website for collecting user data.

Vue Laravel Tutorial Part 6 – Form Submission

In this, I have used Vue- Axios Form Submission.  Axios is use or display data.

With the default integration of Vue in laravel, things look easy and we will not face any problem related to cons like other.

Axios for get data:
axios .get('url') .then(response => (this.info = response)) 
Axios for post data:
axios .post('url') .then(response => (this.info = response)) 
Now come to the point:

First before start this tutorial, you need to check old Vue laravel Tutorial Series must.

One thing must say, To understand this post, you need to see 
past Vue Laravel Tutorials Posts and here are the links:







Here is the working and tested code, you need to follow:


1. Very first, you need to update your resources\js\components\adduser.vue file:

I have used axios post in it for submission the form and you need to just update this code with last code.

        <h2>Add User</h2>
        <p v-if="errors.length">
            <b>Please correct the following error(s):</b>
              <li v-for="error in errors">{{ error }}</li>
          <form @submit="checkForm" id="createAdministrator">
            <div class="form-group">
              <label for="email">Email:</label>
              <input v-model="email" type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
            <button type="submit" class="btn btn-default">Submit</button>

    export default {
        mounted() {
            console.log('Component mounted.')
        data() {
        return {
            errors: [],
            state: {
                email: ''
    checkForm: function (e) {
      this.errors = [];

      if (!this.email) {
        this.errors.push('Email required.');
    var formContents = jQuery("#createAdministrator").serialize();
      axios.post('/admin', formContents).then(function(response, status, request) {
                }, function() {



 2. Second, you need to make new controller file  AdminController.php in app\Http\Controllers folder and add below code into it:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AdminController extends Controller
     public function store(Request $request)
    //here you can insert query, I have just added json data to confirm that code is working fine
    	return json_encode("Record Updated Succeessfully");


3. Now, you need to add below code into your routes/web.php file:
Route::post('/admin', 'AdminController@store');

 That is it, after submit the form, you will get an alert message “Record Updated Successfully”.

form submission data

This is just example working, if you want go deeply or If you have any query related to this post, then please do comment or ask question.

You may also like


jasmeen December 17, 2018 - 6:13 am

Good post..

Ajay Malhotra December 17, 2018 - 4:51 pm

Thank you

Shenesh March 29, 2019 - 7:32 am

thanks for helping others. really useful to understand basic

Ajay Malhotra March 31, 2019 - 1:32 pm

Your welcome and, that is why I made this blog.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.