Why I always need to run npm run production to see changes

Question

I am using Vue in laravel. When I make changes in vue code these changes doesn't appear until I run this command:

npm run production

I want to use vue without this command or at least one time should be enough

Answer 1

The Vue code that you write must be transpiled to vanilla javascript so that most of the browsers out there can understand it (not all browsers understand Vue or the underlying javascript version, such as ES6).

Additionally, most likely the code you write has many dependencies (including Vue itself) but also many other libraries. npm run generates a single javascript file with all the necessary code to run, but also stripping out all other portions of libraries that you don't use. If this didn't happen, it would take a lot of time to your page to load because the browser would need to load all the libraries.

Answer 2

You can simply run npm run watch to keep building vue into vanilla javascript code as you are working on vue components.

What does npm run watch does exactly?

In package.json file in the root folder of your laravel project, you can see that there is a script of "watch" which then runs npm run development -- --watch. Here, --watch part is important. npm run development compiles or builds vue components into ./public/js/app.js and also creates css styles in ./public/css/ corresponding to the styles that you apply inside vue components tags.

./public/js/app.js and ./public/css/*.css files are then included in php blades and it serves as vue components.

Using npm run development is recommeded while you are working on your local dev environment rather than npm run production, which command itself implies that it builds production version of vue components. In production version, vue-devtools cannot inspect vue components but it does in development version. And as --watch part keeps its eye on vue components' chages and it builds as soon as you make any change in .vue files. So you run npm run watch once, you are good to go. No need to run npm run development or npm run production every time.