Laravel-mix: How to integrate with vue-cli

[david-saint]

I am new with webpack...
I created an app with vue-cli by running
vue webpack-simple AppName
Then I install laravel-mix but I can't seem to get it working

[ruchern-chong]

You do not really need laravel-mix for vue-cli, they have their own webpack settings already.

[menasheh]

@ruchern vue/cli has super awesome features like hot-reloading out of the box, is there a way to get that in a laravel/vue project?

[simonepozzobon]

just add .browserSync() to your wepack.mix.js and

"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": "npm run development -- --watch",

to your package.json then run npm run watch.

Check if you have browser-sync installed otherwise:
npm i -D browser-sync browser-sync-webpack-plugin

Link to Documentation

[ruchern-chong]

@simonepozzobon you do not have to manually install both the browser-sync packages. The packages will install itself if your webpack.mix.js configuration has them.

[JoeSchr]

@ruchern vue/cli has super awesome features like hot-reloading out of the box, is there a way to get that in a laravel/vue project?

I got it working after a few days, by making my own helper, inspired by mix. see here: https://github.com/yyx990803/laravel-vue-cli-3/issues/11#issuecomment-451154428

I'm posting it here, because this was the first thing I found while searching how to change from laravel-mix to vue-cli 3.0