Categories
Vue Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *