title: Laravel 7 + Vue - api not defined - Unable to display task-post in vue
body: <p>I am creating a task crm in vue and Laravel 7 which has a form to upload multiple images. I am in the testing phase and I cannot get my <code>AllTask.vue</code> to display. I have a <code>CreateTask.vue</code> form component which is displaying as expected but the <code>AllTasks.vue</code> component does not. In the console I am getting the error:</p>
  <pre><code>Uncaught (in promise) ReferenceError: api is not defined
  </code></pre>
  <p>Being new to Laravel and Vue, I am unclear how to define my api. First I had my controllers located in an API folder within the controllers folder and called them in my <code>api.php</code> file as follows:</p>
  <pre><code>Route::middleware('auth:api')-&gt;get('/user', function (Request $request) {
      return $request-&gt;user();
  });
  
  Route::middleware('auth:api')-&gt;get('/task', function (Request $request) {
       return $request-&gt;task();
   });
  
  Route::apiResources(['user' =&gt; 'API\UserController']);
  Route::apiResources(['task' =&gt; 'API\TaskController']); 
  </code></pre>
  <p>That threw the api not defined error so I commented out the part of the task in this call and moved my controllers out of the API folder and into the regular controllers folder.</p>
  <p>After clearing the cache and re-compiling the app, I am left with the same error in the console. I hope someone can orient me here as I am completely lost.
  Here is the code I have so far:</p>
  <p>TaskController.php</p>
  <pre><code>public function getAllTasks()
      {
          $tasks = Task::with('task_images')-&gt;orderBy('created_at', 'desc')-&gt;get();
          return response()-&gt;json(['error' =&gt; false, 'data' =&gt; $tasks]);
      }
  
  
  public function createTask(Request $request)
      {
          $user = Auth::user();
          $task_name = $request-&gt;task_name;
          $task_priority = $request-&gt;task_priority;
          $task_assigned_to = $request-&gt;task_assigned_to;
          $task_assigned_by = $request-&gt;task_assigned_by;
          $task_description = $request-&gt;task_description;
          $task_to_be_completed_date = $request-&gt;task_to_be_completed_date;
          $task_status = $request-&gt;task_status;
          $task_notes = $request-&gt;task_notes;
          $task_finished = $request-&gt;task_finished;
          $task_image_description = $request-&gt;task_image_description;
          $task_image_id = $request-&gt;task_image_id;
          $images = $request-&gt;images;
  
          $task = Task::create([
              'task_name' =&gt; $task_name,
              'task_priority' =&gt; $task_priority,
              'task_assigned_to' =&gt; $task_assigned_to,
              'task_assigned_by' =&gt; $task_assigned_by,
              'task_description' =&gt; $task_description,
              'task_to_be_completed_date' =&gt; $task_to_be_completed_date,
              'task_status' =&gt; $task_status,
              'task_notes' =&gt; $task_notes,
              'task_finished' =&gt; $task_finished,
              'task_image_description' =&gt; $task_image_description,
              'task_image_id' =&gt; $task_image_id,
              'user_id' =&gt; $user-&gt;id,
          ]);
  
          foreach ($images as $image) {
              $imagePath = Storage::disk('uploads')-&gt;put($user-&gt;id . '/tasks', $image);
              TaskImage::create([
                  'task_image_description' =&gt; $task_image_description,
                  'task_image_path' =&gt; '/uploads/' . $imagePath,
                  'task_id' =&gt; $task-&gt;id
              ]);
          }
          return response()-&gt;json(['error' =&gt; false, 'data' =&gt; $task]);
      }
  </code></pre>
  <p>app.js</p>
  <pre><code>require(&quot;./bootstrap&quot;);
  window.Vue = require(&quot;vue&quot;);
  
  import store from &quot;./store/index&quot;;
  import ElementUI from &quot;element-ui&quot;;
  import &quot;element-ui/lib/theme-chalk/index.css&quot;;
  
  Vue.use(ElementUI);
  
  import { Form, HasError, AlertError } from &quot;vform&quot;;
  import moment from &quot;moment&quot;;
  window.Form = Form;
  Vue.component(HasError.name, HasError);
  Vue.component(AlertError.name, AlertError);
  import VueRouter from &quot;vue-router&quot;;
  Vue.use(VueRouter);
  import VueProgressBar from &quot;vue-progressbar&quot;;
  Vue.use(VueProgressBar, {
      color: &quot;rgb(143, 255, 199)&quot;,
      failedColor: &quot;red&quot;,
      height: &quot;6px&quot;
  });
  import Swal from &quot;sweetalert2&quot;;
  // const Swal = require('sweetalert2')
  window.Swal = Swal;
  const toast = Swal.mixin({
      toast: true,
      position: &quot;top-end&quot;,
      showConfirmButton: false,
      timer: 3000,
      timerProgressBar: true,
      onOpen: toast =&gt; {
          toast.addEventListener(&quot;mouseenter&quot;, Swal.stopTimer);
          toast.addEventListener(&quot;mouseleave&quot;, Swal.resumeTimer);
      }
  });
  window.toast = toast;
  let routes = [
      {
          path: &quot;/dashboard&quot;,
          component: require(&quot;./components/Dashboard.vue&quot;).default
      },
      {
          path: &quot;/developer&quot;,
          component: require(&quot;./components/Developer.vue&quot;).default
      },
      {
          path: &quot;/profile&quot;,
          component: require(&quot;./components/Profile.vue&quot;).default
      },
      {
          path: &quot;/users&quot;,
          component: require(&quot;./components/Users.vue&quot;).default
      },
      {
          path: &quot;/tasks&quot;,
          component: require(&quot;./components/Tasks.vue&quot;).default
      }
  ];
  const router = new VueRouter({
      mode: &quot;history&quot;,
      routes
  });
  Vue.filter(&quot;upText&quot;, function(text) {
      return text.charAt(0).toUpperCase() + text.slice(1);
  });
  Vue.filter(&quot;myDate&quot;, function(created_date) {
      return moment(created_date).format(&quot;MMMM Do YYYY, h:mm:ss a&quot;);
  });
  
  window.Fire_event = new Vue();
  Vue.component(
      &quot;example-component&quot;,
      require(&quot;./components/ExampleComponent.vue&quot;).default
  );
  
  Vue.component(
      &quot;dashboard-component&quot;,
      require(&quot;./components/Dashboard.vue&quot;).default
  );
  
  Vue.component(
      &quot;passport-clients&quot;,
      require(&quot;./components/passport/Clients.vue&quot;).default
  );
  
  Vue.component(
      &quot;passport-authorized-clients&quot;,
      require(&quot;./components/passport/AuthorizedClients.vue&quot;).default
  );
  
  Vue.component(
      &quot;passport-personal-access-tokens&quot;,
      require(&quot;./components/passport/PersonalAccessTokens.vue&quot;).default
  );
  
  Vue.component(&quot;create-task&quot;, require(&quot;./components/CreateTask.vue&quot;).default);
  
  Vue.component(&quot;all-tasks&quot;, require(&quot;./components/AllTasks.vue&quot;).default);
  
  const app = new Vue({
      el: &quot;#app&quot;,
      router,
      store
  });
  </code></pre>
  <p>web.php</p>
  <pre><code>Route::get('/', function () {
      return view('welcome');
  });
  
  Auth::routes();
  
  Route::get('/home', 'HomeController@index')-&gt;name('home');
  
  Route::get('{path}', &quot;HomeController@index&quot;)-&gt;where('path', '([A-z\d/\/_.]+)?');
  
  Route::group(['middleware' =&gt; 'auth', 'prefix' =&gt; 'task'], function () {
      Route::get('get_all', 'TaskController@getAllTasks')-&gt;name('fetch_all');
      Route::post('create_task', 'TaskController@createTask')-&gt;name('create_task');
  });
  </code></pre>
  <p>If I have missed anything or you would like to see more information that I may have missed, please let me know and I will gladly edit my query. Thank you in advance for your help.</p>
  <p><strong>EDIT</strong>
  AllTasks.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-6&quot; v-for=&quot;(task, i) in tasks&quot; :key=&quot;i&quot;&gt;
        &lt;div class=&quot;card mt-4&quot;&gt;
          &lt;img
            v-if=&quot;task.task_images.length&quot;
            class=&quot;card-img-top&quot;
            :src=&quot;task.task_images[0].task_image_path&quot;
            alt
          /&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;p class=&quot;card-text&quot;&gt;
              &lt;strong&gt;{{ task.task_name }}&lt;/strong&gt;
            &lt;/p&gt;
            &lt;br /&gt;
            {{ truncateText(task.task_description) }}
          &lt;/div&gt;
          &lt;button class=&quot;btn btn-success m-2&quot; @click=&quot;viewTask(i)&quot;&gt;View Task&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;el-dialog v-if=&quot;currentTask&quot; :visible.sync=&quot;taskDialogVisible&quot; width=&quot;40%&quot;&gt;
        &lt;span&gt;
          &lt;h3&gt;{{ currentTask.task_name }}&lt;/h3&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-6&quot; v-for=&quot;(img, i) in currentTask.task_images&quot; :key=&quot;i&quot;&gt;
              &lt;img :src=&quot;img.task_image_path&quot; class=&quot;img-thumbnail&quot; alt /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr /&gt;
          &lt;h5&gt;Assigned To&lt;/h5&gt;
          &lt;p&gt;{{ currentTask.task_assigned_to }}&lt;/p&gt;
          &lt;h5&gt;Assigned By&lt;/h5&gt;
          &lt;p&gt;{{ currentTask.task_assigned_by }}&lt;/p&gt;
          &lt;h5&gt;Due&lt;/h5&gt;
          &lt;p&gt;{{ currentTask.task_to_be_completed_date }}&lt;/p&gt;
          &lt;h5&gt;Notes&lt;/h5&gt;
          &lt;p&gt;{{ currentTask.task_notes }}&lt;/p&gt;
          &lt;h5&gt;Priority&lt;/h5&gt;
          &lt;p&gt;{{ currentTask.task_priority }}&lt;/p&gt;
          &lt;h5&gt;Status&lt;/h5&gt;
          &lt;p&gt;{{ currentTask.task_status }}&lt;/p&gt;
        &lt;/span&gt;
        &lt;span slot=&quot;footer&quot; class=&quot;dialog-footer&quot;&gt;
          &lt;el-button type=&quot;primary&quot; @click=&quot;taskDialogVisible = false&quot;&gt;Okay&lt;/el-button&gt;
        &lt;/span&gt;
      &lt;/el-dialog&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import { mapState } from &quot;vuex&quot;;
  export default {
    name: &quot;all-tasks&quot;,
    data() {
      return {
        taskDialogVisible: false,
        currentTask: &quot;&quot;,
      };
    },
    computed: {
      ...mapState([&quot;tasks&quot;]),
    },
    beforeMount() {
      this.$store.dispatch(&quot;getAllTasks&quot;);
    },
    methods: {
      truncateText(text) {
        if (text.length &gt; 24) {
          return `${text.substr(0, 24)}...`;
        }
        return text;
      },
      viewTask(taskIndex) {
        const task = this.tasks[taskIndex];
        this.currentTask = task;
        this.taskDialogVisible = true;
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>In Resources/js/store/index.js</p>
  <pre><code>import Vue from &quot;vue&quot;;
  import Vuex from &quot;vuex&quot;;
  
  Vue.use(Vuex);
  
  const debug = process.env.NODE_ENV !== &quot;production&quot;;
  
  export default new Vuex.Store({
      state: {
          tasks: []
      },
      actions: {
          async getAllTasks({ commit }) {
              return commit(&quot;setTasks&quot;, await api.get(&quot;/task/get_all&quot;));
          }
      },
      mutations: {
          setTasks(state, response) {
              state.tasks = response.data.data;
          }
      },
      strict: debug
  });
  </code></pre>
  <p><strong>EDIT #2</strong>
  after adding the following to bootstrap.js</p>
  <pre><code>window.axios = require('axios');
  
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  window.api = window.axios;
  
  let token = document.head.querySelector('meta[name=&quot;csrf-token&quot;]');
  
  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>The <code>api is not defined</code> error went away but was replaced with:</p>
  <pre><code>TypeError: api.task is not a function
  </code></pre>
  <p>I have isolated where this is located. In CrateTask.vue I have this line:</p>
  <pre><code>api.task(&quot;/task/create_task&quot;, formData, {
            headers: { &quot;Content-Type&quot;: &quot;multipart/form-data&quot; },
          })
  </code></pre>
  <p>The problem (my problem) is I am a noob and don't know how to resolve it. Again, Thanks in advance for your help.</p>