Javascript (VueJS) componentes are not pre-compiled in Laravel 5.4 after "npm install dev"

I'm a software Engineer and want to extend my skills with PHP and JS. I decided to do this by using the framework Laravel for backend and VueJS for front end as VueJS comes with Laravel.

I can create simple API's and web pages with Blade. I'm able to use variables, coming from the PHP backend in Blade views aswell.

To create a nice user experience, i want to use JS to post data back to the server and manipulate the front end. To get an idea how to do this i folowed This tutorial which is pretty straight forward.

The problem is that my Vue component is not (pre-)compiled if i execute the

npm install dev

command. Just for general information: i'm not very familar with npm, i just use the commands from the tutorial.

I'm thinking this because if i compare my code with the result from the tutorial (downloaded from github) i can find the vue component (favorite) in the public/js/app.js file in the example but not in my /public/js/app.js file.

My Package.json:

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

My /resources/assets/js/app.js:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

// window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('favorite', require('./components/Favorite.vue'));


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

npm install dev output:

npm WARN prefer global dev@0.1.3 should be installed with -g
/var/www/vue_todo
├── dev@0.1.3  extraneous
└── gulp@3.9.1  extraneous

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.1.2

How can i solve this problem? If more info is needed, just let me know before i paste my complete project here...

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2hxdrJJ
via IFTTT