diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/packages/vscode-graphql-syntax/grammars/graphql.js.json
index 245be94eb77..eb7c2ef7e77 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.js.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.js.json
@@ -1,6 +1,6 @@
 {
   "scopeName": "inline.graphql",
-  "injectionSelector": "L:(meta.embedded.block.javascript | meta.embedded.block.typescript | source.js | source.ts | source.tsx | source.vue | source.svelte | source.astro) -source.graphql -inline.graphql -string -comment",
+  "injectionSelector": "L:(meta.embedded.block.javascript | meta.embedded.block.typescript | source.js | source.ts | source.tsx | source.vue | source.svelte | source.astro | text.html.vue) -source.graphql -inline.graphql -string -comment",
   "patterns": [
     {
       "begin": "\\s*+(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*\\(",
@@ -39,10 +39,18 @@
         },
         {
           "patterns": [
-            { "include": "source.js" },
-            { "include": "source.ts" },
-            { "include": "source.js.jsx" },
-            { "include": "source.tsx" }
+            {
+              "include": "source.js"
+            },
+            {
+              "include": "source.ts"
+            },
+            {
+              "include": "source.js.jsx"
+            },
+            {
+              "include": "source.tsx"
+            }
           ]
         }
       ]
diff --git a/packages/vscode-graphql-syntax/package.json b/packages/vscode-graphql-syntax/package.json
index 071a4447b5b..2c1f20c1439 100644
--- a/packages/vscode-graphql-syntax/package.json
+++ b/packages/vscode-graphql-syntax/package.json
@@ -64,7 +64,8 @@
           "source.svelte",
           "source.astro",
           "text.html.markdown",
-          "text.html.derivative"
+          "text.html.derivative",
+          "text.html.vue"
         ],
         "scopeName": "inline.graphql",
         "path": "./grammars/graphql.js.json",