How check if Vue is in development mode?

Question

When I run my Vue app, the console shows:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See mo         


        

Answer 1

For my particular case where I use pug and just wanted to conditionally add some elements to a component I set the options.data prop of pug-plain-loader in my webpack.config.js such that the loader looks like the following:

{
  resourceQuery: /^\?vue/,
  use: [
    {
      loader: 'pug-plain-loader',
      options: {
          // Use whatever you'd use to detect mode in the webpack config
          data: { mode: process.env['PRODUCTION'] ? 'production' : 'development' },
        },
      },
    ],
  },
}

Here's the full webpack.config.js I'm using: https://github.com/SuperuserLabs/thankful/blob/5913d9d0bb02e6d2f3b88c541477dc557caa4148/webpack.config.js#L76-L88

After which I could do:

if mode === 'development'
  | Only shown in development mode

For the general case, this was harder than I first anticipated. Although someone good at Webpack could probably do this pretty easily.