Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

dongyukang's avatar

Vuejs error: Cannot read property csrfToken of undefined

Laravel 5.4, I have created new laravel application project, downloaded all

node package dependencies and run 'npm run dev'. Everything works smoothly except

Vue. I keep getting this error from js/app.js.

app.js:12116 Uncaught TypeError: Cannot read property 'csrfToken' of undefined
    at Object.<anonymous> (app.js:12116)
    at Object.<anonymous> (app.js:12132)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:11192)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:40334)
    at __webpack_require__ (app.js:20)
    at app.js:66
    at app.js:69

I was testing just simple vuejs by doing 'example' vuejs components tags that was given.

What is something I should do to fix this?

0 likes
9 replies
hendranucleo's avatar
hendranucleo
9 years ago
Best Answer
Level 4

First of all, the understanding of undefined. What is undefined ?

Solution:

Within <head> section of html append laravel csrfToken as javascript object.

<html>
    <head>
        <script>
        // rename myToken as you like
        window.myToken =  <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
        </script>
    </head>
</html>

Test it on .js file,

console.log(myToken.csrfToken) // should be returning laravel csrf value
2 likes
dongyukang's avatar

yes, i get a laravel csrf value.

I have no idea why i get csrfToken of undefined, though I get csrf value.

I guess package.json has vue version as 2.0.1, whereas npm downloaded 2.1.10. Does it make any difference in vue?

splaq's avatar

I had this problem the other day, however it was with a fresh install for something I'm working on. And I had another project that I installed a few days before.. So I was like what the hell is going on. I compared the two bootstrap.js files and realized that this section right here...

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};

In the app I installed first. Was different from the one I installed a couple days later.

which looked like this.

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    //'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

As you can see I commented out this line //'X-CSRF-TOKEN': window.Laravel.csrfToken, That seemed to fix the problem for me, but I still don't understand why the difference. So all I can really go on for "scientific method" is.. It works.. Whatever..

6 likes
dongyukang's avatar

Thank you very much. I also fixed it just by now in different way.

I just added

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

in head tag and started to work.

I will try your way also and see.

Thank you again.

5 likes
Mickeel's avatar

@dongyukang

If you wonder when and where window.Laravel defined, even after checking the fresh installation and welcome.blade.php. It is actually added to a template for authentication only. (/vendor/laravel/framework/src/Illuminate/Auth/Console/stubs/make/views/layouts/app.stub)

Additionally, you can use blade like what default installation do

<script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>

https://github.com/laravel/framework/commit/adabe9a6b78e71f661da7f58ba36970d63295e8e

3 likes
stephan-v's avatar

This is Laravel making all kinds of assumptions for your "convenience". Sometimes they might want to take a step back with this opinionated approach.

1 like
BENderIsGr8te's avatar

I figured it out. It's an order of operations thing.

Here's what a stock app.js file that comes with 5.4 looks like at the top

require('./bootstrap');
// everything else

I assumed that it was referring to the framework bootstrap. Then I realized it's not. It's referring to bootstrapping the javascript needed for the application.

On line 31 is where the csrfToken is set.

So you have two options. You can pull in jquery ahead of bootstrap and then set your csrfToken.

window.$ = window.jQuery = require('jquery');
window.Laravel = { csrfToken: $('meta[name=csrf-token]').attr("content") };
require('/bootstrap');

That will solve your problem.

Alternatively you can add the window.Laravel to the bootstrap file. If they are going to make assumptions, they just just put the csrf-token meta tag line in the bootstrap by default. Then all you have to do is add the meta tag and you're all set.

7 likes
stef25's avatar

BENderIsGr8te's solution of adding those two lines works.

What if we have no desire to use Vue ?

Please or to participate in this conversation.