Form is not displaying when using csrf token

Question

When the onclick function in Header.vue is clicked I'm getting this error but when I delete the input tag with csrf_token from the form in Register.vue, then the register form is showing as it is supposed to.

Although after submitting the inputs by POST I'm left with the standard 419 (Sorry, your session has expired. Please refresh and try again.) Laravel screen.

I'm sure the 419 screen is caused by lack of CSRF token, so my final question is how do I implement it in vue.js?

I'm using Vue.js and Laravel to create a SPA, in my Register.vue component which renders onclick on top of the site I've added CSRF token as follows:

<template>
        <form id="registerForm" class="register-container" action="registerUser" method="post">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="register-container__form">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" name="email" type="text">
          <label class="mdl-textfield__label">Email</label>
        </div>
    .
    .
    .
    </template>

The onclick function which pops up the registration form is in Header.vue:**

<template>
.
.
.
    <nav class="mdl-navigation">
   <a class="mdl-navigation__link" href="" v-on:click.prevent="registerPopUp()">Sign In</a>
    </nav>

 <register-form/>
</template>

<script>

 import Register from './Register.vue'

 export default {
  components: {
   'register-form': Register
  },
  methods: {
   registerPopUp: () => {
    let loginForm = document.getElementById('loginForm');
    let registerForm = document.getElementById('registerForm');
    loginForm.style.display = "none";
    registerForm.style.display = "block";

    window.onclick = (e) => {
     if(e.target == registerForm)
      registerForm.style.display = "none";
    }
   }
  }
 }
</script>

I don't think that you should be able to use blade within a .vue file. So please consider this answer for your token https://stackoverflow.com/questions/39938284/how-to-pass-laravel-csrf-token-value-to-vue — nakov, Oct 15 '18 at 21:13
Are you submitting your form from js or just doing a regular form submit? — wheelmaker, Oct 15 '18 at 21:25

wheelmaker · Answer 1 · 2018-10-15T21:32:01.727

Yeah you can't put blade directives in the vue template, this is why you're form isn't rendering and you're getting that error, you haven't actually selected a form and then you're trying to access a property on it.

If you are using axios to make your requests to the server from js, the default resources/js/bootstrap.js file will register the csrf token with axios, just make sure you still have the csrf token placed into a meta field on your layout like this:

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

If you aren't using axios, you can access the csrf token from that meta field within JS like this:

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

If you really need that hidden field there (maybe you're submitting the form with a regular html submit button and not js) you could put this in the "created()" section of the vue component:

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

and then in your template:

<input type="hidden" name="_token" :value="csrf_token">

Form is not displaying when using csrf token

1 Answers1