fix(vue-renderer): insert charset before title (#18998)

packages/vue-renderer/src/renderers/spa.js

@@ -71,10 +71,18 @@ export default class SPARenderer extends BaseRenderer {
       // BODY_ATTRS
       meta.BODY_ATTRS = m.bodyAttrs.text()
 
+      //  charset must come before the title to avoid encoding issues
+      let metaTags = m.meta.text()
+      const charset = m.meta.text({ charset: true })
+      if (charset) {
+        meta.HEAD += charset
+        metaTags = metaTags.replace(charset, '')
+      }
+
       // HEAD tags
-      meta.HEAD =
+      meta.HEAD +=
         m.title.text() +
-        m.meta.text() +
+        metaTags +
         m.link.text() +
         m.style.text() +
         m.script.text() +

packages/vue-renderer/src/renderers/ssr.js

@@ -130,7 +130,14 @@ export default class SSRRenderer extends BaseRenderer {
     })
 
     if (meta) {
-      HEAD += meta.title.text() + meta.meta.text()
+      //  charset must come before the title to avoid encoding issues
+      let metaTags = meta.meta.text()
+      const charset = meta.meta.text({ charset: true })
+      if (charset) {
+        HEAD += charset
+        metaTags = metaTags.replace(charset, '')
+      }
+      HEAD += meta.title.text() + metaTags
     }
 
     // Add <base href=""> meta if router base specified

test/dev/basic.ssr.test.js

@@ -86,6 +86,12 @@ describe('basic ssr', () => {
     expect(html).toContain('<div><h1>I can haz meta tags</h1></div>')
     expect(html).toContain('<script data-n-head="ssr" src="/body.js" data-body="true">')
 
+    // charset should be before title
+    const charset = html.indexOf('<meta data-n-head="ssr" charset="utf-8">')
+    const title = html.indexOf('<title>My title - Nuxt</title>')
+    expect(charset).toBeLessThan(title)
+    expect(charset).toBeGreaterThan(0)
+
     const metas = window.document.getElementsByTagName('meta')
     expect(metas[1].getAttribute('content')).toBe('my meta')
     expect(consola.log).toHaveBeenCalledWith('Body script!')