How to pass laravel CSRF token value to vue

Very Easy SolutionJust add a hidden field inside the form. An Example

<form id="logout-form" action="/logout" method="POST" style="display: none;">    <input type="hidden" name="_token" :value="csrf"></form>

Now add csrf variable inside script at the vue file, like this. (Remember, it must be inside data).

<script>     export default {        data: () => ({            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),          }),            }</script>

N.B. You will see a meta tag in your blade.php file like this.

<!-- CSRF Token --><meta name="csrf-token" content="{{ csrf_token() }}">

If there is nothing like this, you need to place it there.

A better way is simply to pass the csrf token via a slot into the vue component.

In blade.php file:

@extends('layouts.app')@section('content')          <my-vue-component>            {{ csrf_field() }}          </my-vue-component>@endsection

In MyVueComponent.vue

   <form role="form">       <slot>         <!-- CSRF gets injected into this slot -->       </slot>        <!-- form fields here -->    </form>

My solution to this is that all vue components get csrf token right before a request is made. I put this in my bootstrap.js file.

Vue.http.interceptors.push((request, next) => {   request.headers.set('X-CSRF-TOKEN', CoolApp.csrfToken);   next();});

Then have a class CoolApp.php

    public function getScriptVariables()    {      return json_encode([          'csrfToken' => csrf_token(),      ]);    }