Laravel blade and VUE form consuming API

@danyal14 you don't need any token if your auth is session based and your routes are in web.php file.

Also don’t forget to include the csrf in the meta on the page

Post endpoint is stored in api.php and application routes are stored in web.php And therefore api requires the authentication, that I understand. And I think in that case I might need to pass api_token.

Create.blade.php

@section('content')

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-4 col-lg-3 pr-md-2">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action"><li class="fas fa-user"></li> My Profile</a>
                    <a href="#" class="list-group-item list-group-item-action"><li class="fas fa-tags"></li> My Posts</a>
                    <a href="#" class="list-group-item list-group-item-action"><li class="fas fa-star"></li> Favourites</a>
                    <a href="#" class="list-group-item list-group-item-action"><li class="fas fa-comment"></li> Messages</a>
                </div>
            </div>
            <div class="col-md-8 col-lg-9 pl-md-0 mt-2 mt-md-0">

                <div>
                    <example-component />
                </div>

            </div>
        </div>
    </div>
@endsection

Vue

<template>
  <div class="container" v-if="!loading">
    <div class="card p-4">
      <h2>Post</h2>
      <fieldset id="fieldset_create">
        <div class="form-row">
          <div class="form-group col-md-12 form-group-txt_name">
            <label for="txt_name">Title</label>
            <input
              type="text"
              class="form-control"
              v-model="post.name"
              placeholder="enter post title"
            />
          </div>
          <div class="form-group col-md-12">
            <label for="txt_description">Description</label>
            <textarea
              class="form-control"
              v-model="post.description"
              placeholder="enter post details"
            ></textarea>
          </div>
          <div class="form-group col-md-12">
            <label for="dd_categories">Category</label>
            <select
              class="form-control"
              v-model="post.category"
              @change="selectCategory($event)"
            >
              <option selected>Select category</option>
              <option
                v-for="category in categories"
                :key="category.id"
                :value="category.id"
                >{{ category.name }}</option
              >
            </select>
          </div>
          <div class="form-group col-md-12" v-if="brands">
            <label for="dd_brands">Brand</label>
            <select
              class="form-control"
              v-model="post.brand"
              @change="selectBrand($event)"
            >
              <option>Select brand</option>
              <option
                v-for="brand in brands"
                :key="brand.id"
                :value="brand.id"
                >{{ brand.name }}</option
              >
            </select>
          </div>
          <div class="form-group col-md-12">
            <label for="dd_models">Model</label>
            <select class="form-control" v-model="post.model">
              <option>Select model</option>
              <option
                v-for="model in models"
                :key="model.id"
                :value="model.id"
                >{{ model.name }}</option
              >
            </select>
          </div>

          <div class="form-group col-md-12">
            <label for="files">Picture</label>
            <input
              type="file"
              @change="onFileChange"
              class="form-control"
            />
          </div>
        </div>
        <button @click="save" class="btn btn-primary">
          Save your Post
        </button>
        <button
          class="btn btn-dark"
          disabled
          style="display: none;"
        >
          <span
            class="spinner-border spinner-border-sm"
            role="status"
            aria-hidden="true"
          ></span>
          Saving Post ...
        </button>
      </fieldset>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "CreateForm",
  components: {},
  data: function() {
    return {
      loading: true,
      categories: null,
      brands: null,
      models: null,
      post: {
        category: 18,
        name: "iPhone 8",
        description: "Selling my iphone because got newone",
        brand: 2,
        model: 8,
        files: []
      }
    };
  },
  mounted() {
    console.log("Component mounted.");
  },
  created() {
    this.loadCategories();
  },
  methods: {
    doSave() {
      Promise.all([this.$store.dispatch("savePost", this.post)])
        .then(responses => {
          this.models = responses[0].data;
          this.loading = false;
        })
        .catch(error => {
          this.errormsg = error;
        })
        .finally(function() {
          this.loading = false;
        });
    },
    save() {
      this.doSave();
    },
    selectCategory(event) {
      this.loadBrandsForSelectedCategory(event.target.value);
    },
    selectBrand(event) {
      this.loadModelForSelectedBrand(event.target.value);
    }
  }
};
</script>