How to pass laravel CSRF token value to vue
Very Easy Solution
Just 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(), ]); }