diff --git a/packages/vue-renderer/src/renderers/modern.js b/packages/vue-renderer/src/renderers/modern.js
index d4938b4852a3..2b55fa454ccd 100644
--- a/packages/vue-renderer/src/renderers/modern.js
+++ b/packages/vue-renderer/src/renderers/modern.js
@@ -109,4 +109,12 @@ export default class ModernRenderer extends SSRRenderer {
       return linkTag.replace('rel="preload"', `rel="modulepreload"${cors}`).replace(legacyJsFile, modernJsFile)
     })
   }
+
+  async render(renderContext) {
+    const result = await super.render(renderContext)
+    if (this.isServerMode) {
+      renderContext.res.setHeader('Vary', 'User-Agent')
+    }
+    return result
+  }
 }
diff --git a/test/unit/modern.server.test.js b/test/unit/modern.server.test.js
index adf90f04cdf6..704609069c8a 100644
--- a/test/unit/modern.server.test.js
+++ b/test/unit/modern.server.test.js
@@ -68,6 +68,14 @@ describe('modern server mode', () => {
     ].join(', '))
   })
 
+  test('Vary header should contain User-Agent', async () => {
+    const { headers: { vary } } = await rp(url('/'), {
+      resolveWithFullResponse: true,
+      headers: { 'user-agent': modernUA }
+    })
+    expect(vary).toContain('User-Agent')
+  })
+
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await nuxt.close()