Laravel CSRF Field in Vue Component

Question

I would like to ask how can I add the csrf_field() in my vue component. The error is

Property or method "csrfToken" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Here's the code:

<script>
export default {
  name: 'create',
  data: function(){
    return {
        msg: ''
    }
  },
  props:['test']
}
</script>

<template>
  <div id="app">
    <form action="#" method="POST">
      {{csrfToken()}}
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="location">Location</label>
        <input type="text" id="location" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="age">Age</label>
        <input type="number" id="age" class="form-control"> 
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-default"> 
      </div>
    </form>
  </div>
</template>

This question seems a clone of https://stackoverflow.com/questions/39938284/how-to-pass-laravel-csrf-token-value-to-vue/47715332 — Jacopo Pace, Dec 08 '17 at 13:46

score 2 · Answer 1 · answered Dec 08 '17 at 13:49

As I already wrote here, I would simply suggest to put this in your PHP file:

<script>
    window.Laravel = <?php echo json_encode(['csrfToken' => csrf_token()]); ?>
</script>

This way you're able to easily import your csrfToken from the JS part (Vue in this case).

Moreover, if you insert this code in your PHP layout file, you can use the token by any component of your app, since window is a JS global variable.

Source: I got the trick from this post.

Davide Casiraghi · Answer 2 · 2019-02-14T08:25:14.473

Laravel version 5 or later

First you need to store your CSRF token in a HTML meta tag in your header:

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

Then you can add it to your script:

<script>
export default {
  name: 'create',
  data: function(){
    return {
        msg: '',
        csrf: document.head.querySelector('meta[name="csrf-token"]').content
    }
  },
  props:['test']
}
</script>

And in the template:

<template>
  <div id="app">
    <form action="#" method="POST">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="location">Location</label>
        <input type="text" id="location" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="age">Age</label>
        <input type="number" id="age" class="form-control"> 
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-default"> 
      </div>
      <input type="hidden" name="_token" :value="csrf">
    </form>
  </div>
</template>

Taylor Foster · Answer 3 · 2017-07-11T19:44:31.880

Try this:

<script>
export default {
  name: 'create',
  data: function(){
    return {
        msg: '',
        csrf: window.Laravel.csrfToken
    }
  },
  props:['test']
}
</script>

And in your markup just use

<input type="hidden" name="_token" :value="csrf" />

EDIT

Bit of a rabbit hole but, one great feature of Vue is that it can easily handle POST, PATCH, etc. requests using AJAX and the vue-resource extension. Instead of using a <form> here you can process this data using your Vue component. If you were to take this route, you can set default headers to send with each request no matter what method it is, so you can always send your CSRF token.

exports deafult{
 http: {
  headers: {
   'X-CSRF-TOKEN': window.Laravel.csrfToken
  }
 }
}

score 1 · Answer 4 · answered Jul 12 '17 at 04:00

if you look at the /resources/assets/js/bootstrap.js you will find these lines

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
   window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
 } else {
  console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
 }

I believe you are using axios for your requests. this means you need to add

<meta name="csrf-token" content="{{csrf_token}}">

in your <head> tag.

score 1 · Answer 5 · answered Mar 30 '19 at 10:49

1

Came across this problem whilst building multiple forms in a vue v-for loop.

added to data;

csrf: document.head.querySelector('meta[name="csrf-token"]').content,

Added hidden form element

<input type="hidden" name="_token" :value="csrf" />

answered Mar 30 '19 at 10:49

Snapey

3,604
1
21
19

score 0 · Answer 6 · answered Jul 11 '17 at 19:12

0

I think you need to write it like this:

{{ crsf_token() }}

and not like this:

{{ csrfToken() }}

If that doesn't work, maybe try this:

{!! csrf_token !!}

answered Jul 11 '17 at 19:12

Youness Arsalane

91
8

Laravel CSRF Field in Vue Component

6 Answers6

Laravel version 5 or later

Linked