Jul 20, 2018

Vue in Production

A.K.A. Removing Vue Devtools from Laravel Spark

Most of my projects use Vue as the frontend javascript framework which complements the Laravel backend nicely.

Vue comes with a nice Chrome plugin to explore the variables of the frontend while developing. It’s a good idea to turn this off in production though. I spent a lot of time trying to figure it out, here’s how it looks.

The Problem

Frontend assets are compiled using Mix (a Webpack helper that comes with Laravel) which aliases to Vue using:

'vue$': 'vue/dist/vue.js'

The problem is if you run either npm run dev or npm run production it always compiles a non-minified, development version of Vue. What???

The Solution

Swap the above line with:

'vue$': mix.inProduction() ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',

Now when you’re compiling to production the minified version of Vue is used, which doesn’t contain Vue DevTools!

Please Login or Register to Comment