feat: add Vue.config configuration to nuxt.config.js (#3655)

After #3564 and the request of #3427  (plus #3452) I decided to add a dedicated `vueConfig`object to the `nuxt.config.js` file.

The keys will be projected on Vue.config.

By default, `Vue.config.performance` is enabled in dev mode, `Vue.config.silent` is enabled in production mode.

Doc PR incoming.

Resolves: #2910, #3427

lib/app/client.js

@@ -30,7 +30,7 @@ let router
 // Try to rehydrate SSR data from window
 const NUXT = window.__NUXT__ || {}
 
-Vue.config.silent = <%= !debug %>
+Object.assign(Vue.config, <%= serialize(vue.config) %>)
 
 <% if (debug || mode === 'spa') { %>
 // Setup global Vue error handler

lib/builder/builder.js

@@ -183,6 +183,7 @@ export default class Builder {
       uniqBy: _.uniqBy,
       isDev: this.options.dev,
       debug: this.options.debug,
+      vue: { config: this.options.vue.config },
       mode: this.options.mode,
       router: this.options.router,
       env: this.options.env,

lib/common/nuxt.config.js

@@ -152,6 +152,12 @@ export default {
     static: 'static',
     store: 'store'
   },
+  vue: {
+    config: {
+      silent: undefined, // = !dev
+      performance: undefined // = dev
+    }
+  },
   router: {
     mode: 'history',
     base: '/',

lib/common/options.js

@@ -147,6 +147,16 @@ Options.from = function (_options) {
     options.build.babel.cacheDirectory = options.dev
   }
 
+  // vue config
+  const vueConfig = options.vue.config
+
+  if (vueConfig.silent === undefined) {
+    vueConfig.silent = !options.dev
+  }
+  if (vueConfig.performance === undefined) {
+    vueConfig.performance = options.dev
+  }
+
   // Normalize ignore
   options.ignore = options.ignore ? [].concat(options.ignore) : []
 

test/e2e/basic.vue-config.test.js

@@ -0,0 +1,56 @@
+import Browser from '../utils/browser'
+import { getPort, loadFixture, Nuxt } from '../utils'
+
+let port
+const browser = new Browser()
+const url = route => 'http://localhost:' + port + route
+
+let nuxt = null
+let page = null
+
+const startServer = async (type = 'basic') => {
+  const config = loadFixture(type)
+  nuxt = new Nuxt(config)
+  port = await getPort()
+  await nuxt.listen(port, 'localhost')
+
+  return nuxt
+}
+
+describe('basic vue-config', () => {
+  beforeAll(async () => {
+    await browser.start({
+      // slowMo: 50,
+      // headless: false
+    })
+  })
+
+  test('default', async () => {
+    nuxt = await startServer()
+    expect(nuxt.options.vue.config).toEqual({ silent: true, performance: false })
+    page = await browser.page(url('/config'))
+
+    expect(await page.$text('#silent')).toBe('true')
+    expect(await page.$text('#performance')).toBe('false')
+  })
+
+  test('explicit', async () => {
+    nuxt = await startServer('config-explicit')
+    page = await browser.page(url('/config'))
+
+    expect(nuxt.options.vue.config).toEqual({ silent: false, performance: true, devtools: true })
+
+    expect(await page.$text('#silent')).toBe('false')
+    expect(await page.$text('#performance')).toBe('true')
+    expect(await page.$text('#devtools')).toBe('true')
+  })
+
+  afterEach(async () => {
+    await nuxt.close()
+  })
+
+  afterAll(async () => {
+    await page.close()
+    await browser.close()
+  })
+})

test/fixtures/basic/pages/config.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <span v-for="(key,i) in configKeys" :id="key" :key="i">{{ vueConfig[key] | toStr }}</span>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  filters: {
+    toStr(v) {
+      return String(v)
+    }
+  },
+  data() {
+    return {
+      vueConfig: Vue.config
+    }
+  },
+  computed: {
+    configKeys: function () {
+      return Object.keys(this.vueConfig).filter(k => ['silent', 'devtools', 'performance', 'productTip'].includes(k))
+    }
+  }
+}
+</script>

test/fixtures/config-explicit/config-explicit.test.js

@@ -0,0 +1,3 @@
+const { buildFixture } = require('../../utils/build')
+
+buildFixture('config-explicit')

test/fixtures/config-explicit/nuxt.config.js

@@ -0,0 +1,13 @@
+import path from 'path'
+
+export default {
+  modulesDir: path.join(__dirname, '..', '..', '..', 'node_modules'),
+  transition: false,
+  vue: {
+    config: {
+      silent: false,
+      performance: true,
+      devtools: true
+    }
+  }
+}

test/fixtures/config-explicit/pages/config.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <span v-for="(key, i) in configKeys" :id="key" :key="i">{{ vueConfig[key] | toStr }}</span>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  filters: {
+    toStr(v) {
+      return String(v)
+    }
+  },
+  data() {
+    return {
+      vueConfig: Vue.config
+    }
+  },
+  computed: {
+    configKeys: function () {
+      return Object.keys(this.vueConfig).filter(k => ['silent', 'devtools', 'performance', 'productTip'].includes(k))
+    }
+  }
+}
+</script>