vue-ts-lsp

vue-ts-lsp

A unified LSP proxy that gives Claude Code full TypeScript intelligence across .ts files and .vue files — including <template> expressions.

Why

Claude Code's LSP integration supports go-to-definition, hover, find-references, document symbols, workspace symbols, call hierarchy, and diagnostics. Getting all of these to work across .ts and .vue files requires two language servers:

• vtsls — TypeScript language server (handles .ts, .js, and .vue <script> blocks via @vue/typescript-plugin)
• vue-language-server (v3) — handles .vue <template> expressions, providing type-aware diagnostics and navigation

The problem: in Vue Language Tools v3, the LSP client must forward tsserver/request notifications from vue-language-server to vtsls and return responses. Claude Code's plugin system can't do this — it just spawns a stdio process.

This proxy fills the gap by acting as both the LSP server (to Claude Code) and the LSP client (to both child servers), implementing the v3 request forwarding protocol internally.

What you get

Scenario	Without Proxy	With Proxy
Go-to-definition in .ts	✅	✅
Go-to-definition into .vue component	⚠️ file only	✅ symbol
Hover on {{ ref.value }} in <template>	❌	✅
Diagnostics for wrong prop type in <template>	❌	✅
Find references across .ts and .vue	⚠️ partial	✅
Symbols in .vue file	⚠️ script only	✅

Installation

1. Install the language server

npm install -g vue-ts-lsp

This installs the vue-ts-lsp binary along with vtsls, @vue/language-server, and typescript as bundled dependencies.

Verify the binary is in your PATH:

which vue-ts-lsp

2. Install the Claude Code plugin

The plugin tells Claude Code to use vue-ts-lsp for Vue and TypeScript files.

From a marketplace:

claude plugin install vue-ts-lsp@vue-ts-lsp

Manually — create an .lsp.json file at the root of your project or in a plugin directory loaded via claude --plugin-dir:

{
    "vue-ts-lsp": {
        "command": "vue-ts-lsp",
        "extensionToLanguage": {
            ".vue": "vue",
            ".ts": "typescript",
            ".tsx": "typescriptreact",
            ".js": "javascript",
            ".jsx": "javascriptreact"
        },
        "startupTimeout": 30000
    }
}

Note: This proxy replaces separate vtsls and vue-volar plugins. Do not install them simultaneously — you'll get duplicate diagnostics.

3. Verify

Start Claude Code (claude --debug for verbose output) and open a .vue or .ts file. You should see diagnostics, hover information, and go-to-definition working.

Architecture

┌─────────────┐     stdio       ┌──────────────────────────────┐
│ Claude Code │◄───────────────►│  vue-ts-lsp (proxy)          │
│ (LSP client)│                 │                              │
└─────────────┘                 │  ┌──────────┐  ┌───────────┐ │
                                │  │  vtsls   │  │  vue_ls   │ │
                                │  │ (child)  │  │  (child)  │ │
                                │  └────▲─────┘  └─────▲─────┘ │
                                │       │              │       │
                                │       │  tsserver/   │       │
                                │       │◄─request ────┘       │
                                │       │──response──►         │
                                └──────────────────────────────┘

Request routing

The proxy currently exposes the Claude Code request surface implemented in this repository. It does not currently advertise completion, rename, or formatting support.