Laravel-mix: Vue Problem laravel 5.4 laramix "npm run dev" compile broken app.js

[Chtheile]

Hey i need help with vue compunets. I set a new Project with laravel and vue. I tested the example.vue in Project works fine. After i added a new vue file and run "npm run dev" no componets are shown. I tried many ways but always after i compile with laravelmix the app.js is broken. Someone any ideas why?

using laradock with nginx and mysql
working on mac os and running the "npm run dev" command on local machine.
Compiler say all fine but when i start the website they not showing the componets.
Add other file for laravel mix

 DONE  Compiled successfully in 11815ms                                                                            10:12:08 PM
                                                                                                                                                                                     Asset      Size  Chunks                    Chunk Names
  fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]         
  fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]         
  fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]         
 fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]         
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]         
                                                               /js/app.js    291 kB       0  [emitted]  [big]  /js/app
                                                             /css/app.css    116 kB       0  [emitted]         /js/app
                                                        mix-manifest.json  66 bytes          [emitted]  

app.js

Vue.component('example', require('./components/Example.vue'));

Vue.component('chat-message', require('./components/ChatMessage.vue'));

const app = new Vue({
    el: '#app'
});

webpack.mix.js

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

package.json

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.8",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

webconsole

Uncaught TypeError: Cannot read property 'csrfToken' of undefined
    at Object.<anonymous> (app.js:12226)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:11278)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:41465)
    at __webpack_require__ (app.js:20)
    at app.js:66
    at app.js:69
(anonymous) @ app.js:12226
__webpack_require__ @ app.js:20
(anonymous) @ app.js:11278
__webpack_require__ @ app.js:20
(anonymous) @ app.js:41465
__webpack_require__ @ app.js:20
(anonymous) @ app.js:66
(anonymous) @ app.js:69
app.js:39383 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

i set up the laravelmix like the tutorial
https://laravel.com/docs/5.4/mix

[devcircus]

It's looking for a csrfToken property on an object that, by default, is defined in your layouts/app file. So it sounds like the view that you are rendering doesn't extend the layout file. In bootstrap.js, axios is initialized with the csrfToken. So either always extend your master layout or store your csrfToken in a way that is always accessible via javascript.

[Chtheile]

Hey thanks i didn t checked it and app.blade was missed. Bad misstake had a blind Point. Anyway thanks

[moyvera]

@Chtheile FYI

Scaffolding
php artisan make:auth.

See here: https://github.com/laravel/framework/blob/5.4/src/Illuminate/Auth/Console/stubs/make/views/layouts/app.stub#L19

I was in the same issue, it's just that :)

[ruchern-chong]

Make sure you have the below in the <head> tag of the page you intend to use axios.

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