fix: properly serialize head functions (#4558)

#4079

packages/builder/src/builder.js

@@ -23,6 +23,7 @@ import {
   createRoutes,
   relativeTo,
   waitFor,
+  serializeFunction,
   determineGlobals,
   stripWhitespace,
   isString
@@ -440,6 +441,7 @@ export default class Builder {
     const templateOptions = {
       imports: {
         serialize,
+        serializeFunction,
         devalue,
         hash,
         r,

packages/common/src/utils.js

@@ -2,6 +2,7 @@ import path from 'path'
 import escapeRegExp from 'lodash/escapeRegExp'
 import get from 'lodash/get'
 import consola from 'consola'
+import serialize from 'serialize-javascript'
 
 export const encodeHtml = function encodeHtml(str) {
   return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
@@ -457,3 +458,20 @@ export function defineAlias(src, target, prop, opts = {}) {
     }
   })
 }
+
+export function serializeFunction(func) {
+  let open = false
+  return serialize(func)
+    .replace(/^(\s*):(\w+)\(/gm, (_, spaces) => {
+      return `${spaces}:function(`
+    })
+    .replace(/^(\s*)(\w+)\s*\((.*?)\)\s*\{/gm, (_, spaces, name, args) => {
+      if (open) {
+        return `${spaces}${name}:function(${args}) {`
+      } else {
+        open = true
+        return _
+      }
+    })
+    .replace(`${func.name}(`, 'function(')
+}

packages/vue-app/template/App.js

@@ -18,7 +18,7 @@ const layouts = { <%= Object.keys(layouts).map(key => `"_${key}": _${hash(key)}`
 
 export default {
   <%= isTest ? '/* eslint-disable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, object-property-newline, arrow-parens */' : '' %>
-  head: <%= serialize(head).replace(/:\w+\(/gm, ':function(').replace('head(', 'function(') %>,
+  head: <%= serializeFunction(head) %>,
   <%= isTest ? '/* eslint-enable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, object-property-newline, arrow-parens */' : '' %>
   render(h, props) {
     <% if (loading) { %>const loadingEl = h('NuxtLoading', { ref: 'loading' })<% } %>

test/fixtures/basic/nuxt.config.js

@@ -39,7 +39,7 @@ export default {
   },
   head() {
     return {
-      titleTemplate: (titleChunk) => {
+      titleTemplate(titleChunk) {
         return titleChunk ? `${titleChunk} - Nuxt.js` : 'Nuxt.js'
       }
     }