Csrf token in vue component
As an alternative ways:
1- Get the token from meta tag with csrf-token name inside of <head>:
$('meta[name="csrf-token"]').attr('content')2- Pass it as a prop to your Vue component:
<your-component :csrf-token="{{ csrf_token() }}"></your-component>
If you have written meta tags for csrf token in the master template then try this.
<template> <form action = "/user/checkout" method="POST"> <input type="hidden" name="_token" v-bind:value="csrf"> .... </form></template>In the script tag of the component:
<script> export default{ data(){ return { //csrf token csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'), } } </script>
Do this in blade:
<Example-component csrf="{{csrf_token()}}"></Example-component>Do this in Vue Component:
In form<input type="hidden" name="_token" v-bind:value="csrf">In Scriptexport default { props: ['csrf', 'oldName'] }