How can I use --watch with this setup?

[Erik Waibel]

I'm trying to use "watch": "vue-cli-service build --no-clean --watch", in my package.json and it seems to somewhat work, but it rebuilds everytime I refresh my application.

[Gérard Mathiuet]

That is what serve is for, take a look: 🙂
https://cli.vuejs.org/guide/cli-service.html

[Erik Waibel]

But using serve will try to startup a new server, I want to use the existing server that's already loaded through laravel. Using --watch I found it was looking at ALL files in the root folder, not just files under frontend/, which is why it kept rebuilding whenever it saw a change under other folders.

[Erik Waibel]

I'm also having issues with using serve because it's not building any files under the public/ folder. Our setup is a little different as we don't have a index.html under src/public and rely on the resources/main.blade.php to be the landing point of the application. Would appreciate any help you can provide!

[Emanuel Mutschlechner]

@erik-viking Can you share a repository link? If you're relying on Laravel Mix and its watch feature you should keep the /package.json and /webpack.mix.js in your project root.

serve will run your Vue application in its own dev server without exposing files to /public. You can use the build script if you want your frontend to be compiled.

[Khary Sharpe]

@erik-viking Thanks for this. It works for me, not experiencing the rebuild on refresh. HMR isn't working however. Did you get it to work for you?

If it hasn't already, maybe "watch" should be added to package.json that ships with vue-cli-3

[Emanuel Mutschlechner]

@kharysharpe HMR won't work when build --watch is used. Source

[Khary Sharpe]

@emanuelmutschlechner Thanks, but it seems like it is trying to do something, *.hot.json files being generated on changes, as if it is meant to work.

[Erik Waibel]

Right, my package.json has "watch": "vue-cli-service build --no-clean --watch", which watches files, but seems to watch files that change outside of the frontend/ folder.

The "R" in HMR would not work, I think you have to use a custom implementation of livereload or browsersync in order for that to work properly. Right now I just have to manualy refresh the page after the files are updated in the public/ folder.

Also, for more insight, here's what my vue.config.js file looks like:

const path = require('path');
const resolve = dir => path.join(__dirname, `src/${dir}`);

module.exports = {
    baseUrl: '/',
    outputDir: '../public/',
    // Fixing CircleCi Bug related to thread-loader
    parallel: !process.env.CIRCLECI,
    css: {
        sourceMap: process.env.NODE_ENV !== 'production',
    },
    configureWebpack: config => {
        // To enable sourceMaps in VSCode debugger
        config.devtool = 'source-map';
        config.watchOptions = {
            aggregateTimeout: 500,
            ignored: /node_modules|public|laradock|storage|\.git/,
        };
    },
    chainWebpack: config => {
        // setup alias resolution for require() paths
        config.resolve.alias
            // .set('@', path.join(__dirname, 'resources/src'))
            .set('api', resolve('api'))
            .set('components', resolve('components'))
            .set('images', resolve('assets/images'))
            .set('languages', resolve('languages'))
            .set('lodash', 'lodash-es')
            .set('objects', path.join(__dirname, '../shared/json'))
            .set(
                'persona-ui',
                path.join(__dirname, 'node_modules/persona-ui/src/components')
            )
            .set('plugins', resolve('plugins'))
            .set('router', resolve('router'))
            .set('store', resolve('store'))
            .set('utils', resolve('utils'))
            .set('views', resolve('views'));

        // delete HTML related webpack plugins
        // this is needed so it doesn't try to do anything
        // with the files inside public/ folder
        config.plugins.delete('html');
        config.plugins.delete('preload');
        config.plugins.delete('prefetch');
        config.plugins.delete('copy');

        config.plugin('copy').use('copy-webpack-plugin', [
            [
                {
                    from: '../.env',
                    to: __dirname,
                    toType: 'dir',
                },
            ],
        ]);

        // This will remove auto-generated files that were previously built
        config
            .plugin('clean-public')
            .use('clean-webpack-plugin', [
                [
                    'css',
                    'fonts',
                    'images',
                    'img',
                    'js',
                    '*.hot-update*',
                    '*.js',
                    '*.js.map',
                ],
                { root: path.join(__dirname, '../public') },
            ]);

        config.module.rules.delete('less');
        config.module.rules.delete('pug');
        config.module.rules.delete('sass');
        config.module.rules.delete('scss');
        config.module.rules.delete('stylus');

        config.module
            .rule('images')
            .use('url-loader')
            .tap(args => {
                // disable injection of base64 images (???)
                args.limit = -1;

                return args;
            });
    },
};

[DogBot]

Did you ever get this resolved? I have a very similar need with a php backend.

[Erik Waibel]

No, I'm pretty sure you need to setup some sort of custom browserSync or liveReload functionality in order to get that to work.

[Austin White]

I, too, have a project I would like to use Laravel to serve up the blade file as the entry point for the app (as opposed to vue-cli's node server) and have HMR work as well. I tried following #11, but it doesn't seem to be a straightforward solution. Has anyone been able to get this sort of setup running? Or do I need to ditch vue-cli entirely and run laravel-mix instead?