Sometimes, we want to pass Laravel CSRF token value to Vue.js.

In this article, we’ll look at how to pass Laravel CSRF token value to Vue.js.

How to pass Laravel CSRF token value to Vue.js?

To pass Laravel CSRF token value to Vue.js, we can create a slot in our Vue component to accept the CSRF token.

For instance, we write

@extends('layouts.app')

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

to wrap my-vue-component with the csrf_field() helper.

Then in MyVueComponent.vue, we write

<template>
  <form>
    <slot> </slot>
  </form>
</template>

to add a slot into our component.

And the CSRF token will be interpolated there since we have {{ csrf_field() }} inside the my-vue-component tags.

Conclusion

To pass Laravel CSRF token value to Vue.js, we can create a slot in our Vue component to accept the CSRF token.