title: How to Pass CSRF token with AJAX request Laravel + Vue.js
body: <p>I have a Vue.js component...</p>
  
  <pre><code>&lt;template&gt;
      &lt;form method="POST" action="/login"&gt;
          &lt;button class="btn btn-primary center-block" @click="$emit('buttonClicked')"&gt;
              Login
          &lt;/button&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      var axios = require('axios');
  
      Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');
  
      export default {
          created: function () {
              axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
          },
          props: ['show'],
          name: "login-component",
          methods: {
              close: function () {
                  this.$emit('close');
              },
              buttonClicked: function () {
                  axios.post('/login', {data: this.data})
                      .then(function (response) {
                          console.log(response);
                      })
                      .catch(function (error) {
                          console.log(error.message);
                      });
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>My csrf exists in meta: </p>
  
  <pre><code>&lt;meta id="token" name="csrf-token" content="{{ csrf_token() }}"&gt;
  </code></pre>
  
  <p>But it doesn't pass with the Ajax request instead  I get... </p>
  
  <blockquote>
    <p><code>419 unknown status</code> and no <code>_token</code> in console-><code>Form Data</code></p>
  </blockquote>
  
  <p>What am I doing wrong?</p>
  
  <p>I tried to use...</p>
  
  <pre><code>window.axios.defaults.headers.common = {
      'X-Requested-With': 'XMLHttpRequest',
      'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
  };
  </code></pre>
  
  <p>But it didn't help.</p>