Submit form using VueJs and AJAX in Laravel 5.1
<p>I am trying to submit a form using AJAX and VueJs. But somehow I am failing to achieve that. I always end up getting an empty <code>Illuminate\Http\Request</code> object.</p>

<p>The blade file:</p>

<pre><code>&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;generate-admin&gt;&lt;/generate-admin&gt;
    &lt;/div&gt;

    &lt;script src="https:http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="{{ url('/js/main.js') }}"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p>The component:</p>

<pre><code>&lt;template&gt;
    &lt;form id="createAdministrator" @submit.prevent="createAdministrator"&gt;

        &lt;div class="form-group"&gt;

           &lt;input type="text"
                  name="username"
                  id="txtUserName"
                  placeholder="Username"
                  autocomplete="off"
                  v-model="username"
           /&gt;

        &lt;/div&gt;

        &lt;input type="submit" value="Submit"&gt;

    &lt;/form&gt;
&lt;/template&gt;

&lt;script&gt;
    export default {
        data: function() {
            return {
                username: ''
            }
        },

        methods: {
            createAdministrator: function() {
                formContents = jQuery("#createAdministrator").serialize();

                this.$http.post('/admin', formContents).then(function(response, status, request) {
                    console.log(response);
                }, function() {
                    console.log('failed');
                });
            }
        }
    }
&lt;/script&gt;
</code></pre>

<p><strong><code>main.js</code></strong></p>

<pre><code>import Vue from 'vue';
import GenerateAdmin from './components/GenerateAdmin.vue';

var VueResource = require('vue-resource')
Vue.use(VueResource);

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');
Vue.http.options.emulateJSON = true;

new Vue({
    el: 'body',

    components: { GenerateAdmin }
});
</code></pre>

<p><strong><code>gulpfile.js</code></strong></p>

<pre><code>var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('main.js');
});
</code></pre>

<p><strong><code>routes.php</code></strong></p>

<pre><code>Route::get('/admin/create', function () {
    return view('admin.create');
});

Route::post('/admin', function(Request $request) {
    // returns an empty object.
    return response(['results' =&gt; $request]);
});

Route::get('/', function () {
    return view('welcome');
});
</code></pre>

<p>What I get in return is:</p>

<pre><code>"{"results":{"attributes":{},"request":{},"query":{},"server":{},"files":{},"cookies":{},"headers":{}}}"
</code></pre>

<p>When I check the Request Payload section of Network Tab in Chrome. I do see that the form is getting submitted successfully with whatever data I write in the text box above.</p>

<p>Why is this happening ? Kindly guide me where I have made the mistake ?</p>

<hr>

<p><strong>UPDATE 1:</strong></p>

<p>I was playing trial and error with the code above. And I removed the namespace <code>Illuminate\Http\Request</code> and also removed the argument <code>Request $request</code> from the <code>post</code> Route. And changed the passing parameter to object from string.</p>

<p>Doing so, did the job for me that I was looking for. Why I don't know. I am still looking for someone who can explain this to me.</p>

<p>Why adding the namespace <code>Iluminate\Http\Request</code> in <code>routes.php</code> file didn't work as I was expecting and removing it did the task ?</p>

<p>Can anybody tell me why it didn't worked out earlier ? Any kind of help is highly appreciated.</p>

<hr>

<p><strong>P.S.:</strong> I have started learning VueJs Components recently.</p>