From edc8255da6b3f84cf37220d101aff223a07c4cc7 Mon Sep 17 00:00:00 2001
From: Kunall Banerjee <hey@kimchiii.space>
Date: Thu, 12 Mar 2026 12:30:21 -0400
Subject: [PATCH] docs: Add Vue language server configuration (#51356)

Follow-up to https://github.com/zed-extensions/vue/pull/87.

Release Notes:

- N/A
---
 docs/src/languages/vue.md | 54 ++++++++++++++++++++++++++++++++++++++-
 typos.toml                |  4 ++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/docs/src/languages/vue.md b/docs/src/languages/vue.md
index 607d2b18a5243a5b552db96308faab6aebeb8b6c..3c2336119dfceb4aeea226bb2ccc2484dd438cbc 100644
--- a/docs/src/languages/vue.md
+++ b/docs/src/languages/vue.md
@@ -8,7 +8,59 @@ description: "Configure Vue language support in Zed, including language servers,
 Vue support is available through the [Vue extension](https://github.com/zed-extensions/vue).
 
 - Tree-sitter: [tree-sitter-grammars/tree-sitter-vue](https://github.com/tree-sitter-grammars/tree-sitter-vue)
-- Language Server: [vuejs/language-tools/](https://github.com/vuejs/language-tools/)
+- Language Server: [vuejs/language-tools](https://github.com/vuejs/language-tools)
+
+## Initialization Options
+
+### Specifying location of TypeScript SDK
+
+By default, this extension assumes that you are working in a project with a `node_modules` directory, and searches for
+the TypeScript SDK inside that directory.
+
+This may not always be true; for example, when working in a project that uses Yarn PnP, there is no `node_modules`. For
+editor support, the [documented](https://yarnpkg.com/getting-started/editor-sdks) approach is to run something like
+`yarn dlx @yarnpkg/sdks`. In that case, you can provide the following initialization options in your Zed settings:
+
+```json
+{
+  "lsp": {
+    "vue": {
+      "initialization_options": {
+        "typescript": {
+          "tsdk": ".yarn/sdks/typescript/lib"
+        }
+      }
+    }
+  }
+}
+```
+
+## Settings Options
+
+`lsp.vue.settings` is passed through to the Vue language server (Volar / [`vuejs/language-tools`](https://github.com/vuejs/language-tools)). The following settings are enabled by default:
+
+```json
+{
+  "lsp": {
+    "vue": {
+      "settings": {
+        // Display inlay hints for the `$event` parameter in inline event handlers.
+        "vue.inlayHints.inlineHandlerLeading": true,
+        // Display hints when required component props are missing in templates.
+        "vue.inlayHints.missingProps": true,
+        // Display inlay hints for patterns that wrap component options.
+        "vue.inlayHints.optionsWrapper": true,
+        // Display inlay hints related to `v-bind` shorthand (`:`).
+        "vue.inlayHints.vBindShorthand": true
+      }
+    }
+  }
+}
+```
+
+You can find the upstream settings configuration schema [`here`](https://github.com/vuejs/language-tools/blob/ee5041d27940cf6f9a5150635d3b13140a9dff54/extensions/vscode/package.json#L252).
+
+> Note: Some settings (e.g. `vue.editor.focusMode`) may not take effect.
 
 ## Using the Tailwind CSS Language Server with Vue
 
diff --git a/typos.toml b/typos.toml
index 863fea3822d62a51f737c3d7fa87a4c198710cfa..8c57caaf0417efdb01013e76f179515d9629a47c 100644
--- a/typos.toml
+++ b/typos.toml
@@ -92,6 +92,8 @@ extend-ignore-re = [
     # AMD GPU Services
     "ags",
     # AMD GPU Services
-    "AGS"
+    "AGS",
+    # Yarn Plug'n'Play
+    "PnP"
 ]
 check-filename = true