diff --git a/front_end/core/common/ResourceType.ts b/front_end/core/common/ResourceType.ts
index 0db7848537..ee464cf7ba 100644
--- a/front_end/core/common/ResourceType.ts
+++ b/front_end/core/common/ResourceType.ts
@@ -563,5 +563,5 @@ export const mimeTypeByExtension = new Map([
   ['svelte', 'text/x.svelte'],
 
   // Vue
-  ['vue', 'text/html'],
+  ['vue', 'text/x.vue'],
 ]);
diff --git a/front_end/ui/components/code_highlighter/CodeHighlighter.ts b/front_end/ui/components/code_highlighter/CodeHighlighter.ts
index 9c9cfadd92..93db830d01 100644
--- a/front_end/ui/components/code_highlighter/CodeHighlighter.ts
+++ b/front_end/ui/components/code_highlighter/CodeHighlighter.ts
@@ -166,6 +166,9 @@ export async function languageFromMIME(mimeType: string): Promise<CodeMirror.Lan
     case 'text/x.svelte':
       return (await CodeMirror.svelte()).svelte();
 
+    case 'text/x.vue':
+      return (await CodeMirror.vue()).vue();
+
     default:
       return null;
   }
diff --git a/test/unittests/front_end/core/common/ResourceType_test.ts b/test/unittests/front_end/core/common/ResourceType_test.ts
index 08cd40d7ba..730d358e4b 100644
--- a/test/unittests/front_end/core/common/ResourceType_test.ts
+++ b/test/unittests/front_end/core/common/ResourceType_test.ts
@@ -462,7 +462,7 @@ describe('ResourceType', () => {
     });
 
     it('returns correct MIME type for .vue files', () => {
-      assert.strictEqual(ResourceType.mimeFromExtension('vue'), 'text/html');
+      assert.strictEqual(ResourceType.mimeFromExtension('vue'), 'text/x.vue');
     });
 
     it('returns correct MIME type for .webmanifest files', () => {
@@ -527,7 +527,7 @@ describe('ResourceType', () => {
 
     it('returns correct MIME type for .vue files', () => {
       const url = 'http://localhost/App.vue' as Platform.DevToolsPath.UrlString;
-      assert.strictEqual(ResourceType.mimeFromURL(url), 'text/html');
+      assert.strictEqual(ResourceType.mimeFromURL(url), 'text/x.vue');
     });
 
     it('returns correct MIME type for .webmanifest files', () => {
diff --git a/test/unittests/front_end/ui/components/CodeHighlighter_test.ts b/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
index 25a2ffaafe..73f41d27e3 100644
--- a/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
+++ b/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
@@ -120,10 +120,10 @@ it('can highlight Angular Templates', testHighlight(`
 
   it('can highlight Vue Templates', testHighlight(`
 <[tag template]>
-  <[tag Header] [attribute v-show]=[attribute-value "view"] />
-  <[tag Main] [attribute @hide]=[attribute-value "onHide"] />
+  <[tag Header] [keyword v-show]=[attribute-value "][variable view][attribute-value "] />
+  <[tag Main] @[variable hide]=[attribute-value "][variable onHide][attribute-value "] />
   <[tag router-view] />
-</[tag template]>`, 'text/html'));
+</[tag template]>`, 'text/x.vue'));
 
   it('can highlight CSS', testHighlight(`
 [tag span].[type cls]#[atom id] {