How to add Laravel CSRF Token in VueJS file?

Question

I am creating a simple login form using Laravel and VueJS.

Since I am designing the template of Login Form in .vue file, @csrf doesn't work at all.

So, how can I add csrf-token (@csrf) or any of the blade syntax in any of the forms in .vue file?

Login.vue

<template>
    <div class="app">
        <form action="/login" method="post">
            @csrf  <!-- How can I make this work -->
            <input type="text" class="email">
            <input type="password" class="password">
            <input type="submit" value="Login">
        </form>
    </div>
</template>

score 1 · Answer 1 · answered Apr 05 '18 at 14:37

So back in the day Laravel had this special part of the main /resources/views/layouts/app.blade.php that exposed the CSRF token in all views as a javascript variable.

It looked something like this:

<script>
    window.CSRF_TOKEN = '{{ csrf_token() }}';
</script>

That way in your Vue, React, jQuery or vanilla Javascript you could just use the global variable window.CSRF_TOKEN and reference the Laravel CSRF token.

For those who don't know window is a special variable in Javacript, similar to the idea of super globals in PHP like $_SERVER or $_GET.

How to add Laravel CSRF Token in VueJS file?

1 Answers1