How can make the vue 3 lsp work with typescript?

[AQMpolyface]

Hello, so first of all i know there are discussions already on this, but they dont seem to work for typescript integration.
So the html section of vue works fine, but the lsp inside the <script> tag doesnt work.
So i am kinda desperate, i am already helix brainwashed, and i dont rly wanna use another editor.

How can i make vue work with helix?

when i helix -v and look at the logs i get this:

2025-06-02T10:01:32.890 helix_core::syntax [ERROR] TS parser failed, disabling TS for the current buffer: Err(Cancelled)

hx --health vue doesnt give any indications.

those were some of the config i tried but didnt worked:

[language-server.vue-language-server]
command = "vue-language-server"
args = ["--stdio"]
config = { typescript = { tsdk = "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib" } }

[[language]]
name = "vue"
scope = "source.vue"
file-types = ["vue"]
language-servers = ["vue-language-server"]
auto-format = true
roots = ["package.json"]
injection-regex = "vue"
formatter = { command = "dprint", args = [ "fmt", "--stdin", "vue" ] }

my current one:

[[language]]
name = "vue"
auto-format = true
scope = "source.vue"
injection-regex = "vue"
file-types = ["vue"]
language-servers = [ "volar", "eslint"]
formatter = { command = "dprint", args = [ "fmt", "--stdin", "vue" ] }
roots = ["package.json", "vue.config.js", ".prettierrc.json"]

 [language-server.volar]
 command = "vue-language-server"
 args = ["--stdio"]

 [language-server.volar.config]
 typescript = { tsdk = "./node_modules/typescript/lib" }
[language-server.eslint]
command = "vscode-eslint-language-server"
args = ["--stdio"]

[AQian0]

[language-server.typescript-language-server.config]
plugins = [{  name = "@vue/typescript-plugin", location = "/Users/aqian/.bun/install/global/node_modules/@vue/language-server", languages = ["vue"] }]

[language-server.volar]
command = "vue-language-server"
args = ["--stdio"]

[language-server.volar.config]
vue = { hybridMode = false }
typescript = { tsdk = "/Users/aqian/.bun/install/global/node_modules/typescript/lib" }

[[language]]
name = "vue"
scope = "source.vue"
injection-regex = "vue"
file-types = ["vue"]
roots = ["package.json", ".git"]
language-servers = ["volar"]

This is basically my setup, primarily referencing the discussion at #10691 and another issue (though I can't recall which one specifically). The configurations mentioned in those issues might not be entirely correct or could be somewhat outdated, especially considering how frequently Vue LSP updates. So, I've made some adjustments.

For Helix, I generally think it's best to prioritize the simplest configuration possible. You could try setting things up without linters or other extras first, aiming for a minimal working LSP implementation. Then, you can gradually add other configurations on top of that. If your project doesn't strictly require ESLint, I'd recommend looking into Biome or OxLint. These modern tools often have better CLI experiences and are quite easy to integrate into various editors.

One more thing: using a globally installed TypeScript might seem a bit like a workaround, but it works quite reliably – at least it isn't affected by workspace-specific setups or similar issues.

Hope this helps!

[AQMpolyface]

with ur config i get

2025-06-04T08:57:40.181 helix_lsp::transport [ERROR] volar <- InternalError: Request initialize failed with message: Can't find typescript.js or tsserverlibrary.js in "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\@vue\\typescript-plugin"
2025-06-04T08:57:40.181 helix_lsp [ERROR] failed to initialize language server: protocol error: InternalError: Request initialize failed with message: Can't find typescript.js or tsserverlibrary.js in "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\@vue\\typescript-plugin"

but i found a config that works!

[language-server.tailwindcss-language-server]
command = "tailwindcss-language-server"
args  = ["--stdio"]

[language-server.emmet-lsp]
command = "emmet-ls"
args  = ["--stdio"]

[[language]]
name = "vue"
auto-format = false
formatter = { command = 'dprint', args = ["fmt", "--stdin", "vue"] }
language-servers = ["vuels", "typescript-language-server",  "tailwindcss-language-server"] 

[[language-server.typescript-language-server.config.plugins]]
name = "@vue/typescript-plugin"
location = "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\@vue\\typescript-plugin"
languages = ["vue"]

I literally have no clue why yours doesnt work and this one works TwT

[AQian0]

with ur config i get

2025-06-04T08:57:40.181 helix_lsp::transport [ERROR] volar <- InternalError: Request initialize failed with message: Can't find typescript.js or tsserverlibrary.js in "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\@vue\\typescript-plugin"
2025-06-04T08:57:40.181 helix_lsp [ERROR] failed to initialize language server: protocol error: InternalError: Request initialize failed with message: Can't find typescript.js or tsserverlibrary.js in "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\@vue\\typescript-plugin"

but i found a config that works!

[language-server.tailwindcss-language-server]
command = "tailwindcss-language-server"
args  = ["--stdio"]

[language-server.emmet-lsp]
command = "emmet-ls"
args  = ["--stdio"]

[[language]]
name = "vue"
auto-format = false
formatter = { command = 'dprint', args = ["fmt", "--stdin", "vue"] }
language-servers = ["vuels", "typescript-language-server",  "tailwindcss-language-server"] 

[[language-server.typescript-language-server.config.plugins]]
name = "@vue/typescript-plugin"
location = "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\@vue\\typescript-plugin"
languages = ["vue"]

I literally have no clue why yours doesnt work and this one works TwT

Well, glad to hear you finally got it configured successfully!

It's not surprising that my configuration didn't work for you. I remember trying several different config files myself back then, and none of them worked out for me either. ヾ(。￣□￣)ツ

I think there might be a few reasons why it didn't work for you:
Firstly, I'm on a Unix-like system, so things like file paths, required permissions, and so on, might be different from your setup.
Secondly, I use Bun as my package manager, and its underlying mechanisms for this might differ from Node's.
Of course, apart from these, there could be other, weirder issues. But as you know, LSPs can be tricky, and not many people fully understand all their ins and outs.

By the way, you might want to double-check if your tsdk and plugins are pointing to the correct file locations. You can usually troubleshoot this easily with hx --health [language].