Enabling npm run watch for Vite

Laravel has went through some big changes in the years regarding asset bundling. Traditionally, most developers relied on using webpack via Laravel Mix. Now the recommended tool is Vite. We aren't here to compare which one is better, or talk about which one we prefer. Our goal is to show you how simple it is to add a feature that came installed by default on Mix that Vite doesn't include.

Of course we are talking about using 'watch' which allows the bundler to watch for file changes to keep recompiling. If you are running this on a local domain, you probably don't need it since you are probably running 'npm run dev' which starts it's own server. But since we generally develop on a public facing server that is already running Nginx or Apache, we don't want to start another server. That means we want to turn on live asset compiling without it.

If you're like me, you don't want a long tutorial that is only there to beef up SEO rankings, you just want to know how to do it. So with no frills, here is how you edit your package.json. Inside package.json, there is a root object called scripts. Add the yellow line below to it and save. Now you have access.