CSRF token mismatch From separate vue project to laravel controller - laravel

Question

I have two projects running
One is front end
Other is backend
Frontend project is made in vue js and backend is made in laravel
I am trying to do a post request via axios but i get csrf token mismatch
I cant use the meta tag solution as they both are different projects
**Route i want to hit**
Route::group(['middleware' => 'auth'], function () {
Route::post('tasks', 'TaskController#store')->name('tasks.store');
});
**my axios call in my vue js project**
addTask:function()
{
this.displayError = false;
if($('.inputs').length > 0)
{
const config ={
onUploadProgress:function(progressEvent)
{
var percentCompleted = Math.round((progressEvent.loaded * 100)/progressEvent.total);
console.log(percentCompleted)
}
}
var form = new FormData();
form.append("title",this.title);
form.append("description",this.txtdesc);
form.append("status_id",this.status_id);
form.append("user_id",this.user_id);
axios.post("http://127.0.0.1:8020/tasks",form,config).then((res)=>{
console.log(res)
})
}else
{
this.displayError = true;
}
}
When i fire this function to send data to controller it gives csrf token mismatch error
If it was a laravel project i could've ha tried
adding {{csrf_field()}}
adding #csrf
adding csrf in meta
but how to do it in vue js
PS I have tried removing auth middleware but it returned the same error and
it will work if i place the route inside the cerifycsrftoken file in backend project
but i want to do it with csrf token

Answer 1

I placed my routes from web.php to api.php and added the prefix api which solved my csrf token mismatch problem
also if i place route url in verifyCsrfToken.php file it solves the issue without moving routes to api.php
I took route
Route::post('tasks', 'TaskController#store')->name('tasks.store');
from the web .php file and then i placed it in api.php file
Route::post('tasks', 'TaskController#store')->name('tasks.store');
also i didnt used auth middleware on them