title: Laravel Vue Axios is not defined
body: <p>I built a simple form using the vuetify Framework in my laravel app.
  The bootstrap.js already includes the axios Client but I still get the error on submit that axios is not defined:</p>
  
  <blockquote>
    <p>[Vue warn]: Error in event handler for "click": "ReferenceError: axios
    is not defined"</p>
  </blockquote>
  
  <p>This is the Default bootstrap.js file which ships with a new laravel  Installation, I just removed jquery:</p>
  
  <pre><code>window._ = require('lodash');
  window.Popper = require('popper.js').default;
  
  window.axios = require('axios');
  
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  
  let token = document.head.querySelector('meta[name="csrf-token"]');
  
  if (token) {
      window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
      console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }
  </code></pre>
  
  <p>And this is how my app.js file Looks like:</p>
  
  <pre><code>import bootstrap from 'bootstrap';
  
  import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
  
  import Vue from 'vue';
  import Vuetify from 'vuetify';
  import 'vuetify/dist/vuetify.min.css';
  
  Vue.use(Vuetify);
  
  Vue.component('form-component', require('./components/FormComponent.vue'));
  
  const app = new Vue({
      el: '#app',
  
      data: {
          loading: true
      },
  
  });
  </code></pre>
  
  <p>The FormComponent Looks like this, basically I am trying to post the data using axios:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-container grid-list-xl&gt;
          &lt;v-flex&gt;
              &lt;v-text-field
                  v-model="name"
                  :error-messages="nameErrors"
                  :counter="10"
                  label="Name"
                  required
                  @input="$v.name.$touch()"
                  @blur="$v.name.$touch()"
              &gt;&lt;/v-text-field&gt;
          &lt;/v-flex&gt;
          &lt;v-flex&gt;
              &lt;v-btn @click="submit"&gt;submit&lt;/v-btn&gt;
              &lt;v-btn @click="clear"&gt;clear&lt;/v-btn&gt;        
          &lt;/v-flex&gt;
      &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { validationMixin } from 'vuelidate'
  import { required, maxLength, email } from 'vuelidate/lib/validators'
  
  export default {
      mixins: [validationMixin],
  
      validations: {
          name: { required, maxLength: maxLength(20) }
      },
  
      data() {
          return {
              reactive: false,
              name: '',
          }
      },
  
      computed: {
          nameErrors () {
              const errors = [];
              if (!this.$v.name.$dirty) {
                  return errors;
              } 
              !this.$v.name.maxLength &amp;&amp; errors.push('Name must be at most 10 characters long');
              !this.$v.name.required &amp;&amp; errors.push('Name is required.');
              return errors;
          },
      },
  
      methods: {
          submit () {
              this.$v.$touch(); 
              axios.post('event/store', {
                  'name': this.name,
              })
              .then((response) =&gt; {
                  console.log("success");
              })
              .catch((error) =&gt; {
                  console.log("error");
              })
          },
          clear () {
              this.$v.$reset();
              this.name = '';
          }
      }
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am loading axios so I do not know why that error appears.</p>