Vue's LSP only partially supported

[DoctorRainer]

https://github.com/vuejs/language-tools mostly works only in script tag and has no completion for css and template parts

[DoctorRainer]

It's weird that Helix has no proper support for Vue because Vue is very popular, some people will just refuse to use Helix because they write vue

[kirawi]

Run hx -v and check :log-open after attempting completion. Also provide the information per the the issue template: https://github.com/helix-editor/helix/issues/new?assignees=&labels=C-bug&projects=&template=bug_report.yaml

[DoctorRainer]

@kirawi

Here is the log

helix.log

I use macOS, build from source code 5c11af1 and it's the same on any terminal emulators

[zetashift]

Volar changed the way the server works...again.I'd recommend you adapt this https://github.com/vuejs/language-tools?tab=readme-ov-file#none-hybrid-modesimilar-to-takeover-mode-configuration-requires-vuelanguage-server-version-207

I've stopped using Helix for Volar based LSPs just because I'm tired of dealing with the pacing of the tooling(this is not the fault of Helix).
For kakoune I use the following:

[language_server.typescript-language-server]
filetypes = ["javascript", "typescript"]
roots = ["package.json", "tsconfig.json", "jsconfig.json", ".git", ".hg"]
command = "typescript-language-server"
args = ["--stdio"]
settings_section = "_"

[language_server.typescript-language-server.settings._]
quotePreference = "double"
typescript.format.semicolons = "insert"
plugins = [{name = "@vue/typescript-plugin", location = "/path/to/bin/vue-language-server", languages = ["vue"]}]

[language_server.vuels]
filetypes = ["vue"]
command = "vue-language-server"
roots = ["package.json", ".git"]
args = ["--stdio"]
settings_section = "_"

[language_server.vuels.settings._]
vue = { hybridMode = false }
typescript = { tsdk = "node_modules/typescript/lib/" }

[stefanfrede]

After searching the web and trying a lot, I finally got it working in Helix:

[language-server.typescript-language-server.config]
plugins = [{  name = "@vue/typescript-plugin", location = <path to "/@vue/language-server">, languages = ["vue"] }]

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

[language-server.volar.config]
vue = { hybridMode = false }
typescript = { tsdk = <path to "/typescript/lib" }

[[language]]
name = "vue"
scope = "source.vue"
injection-regex = "vue"
file-types = ["vue"]
roots = ["package.json", ".git"]
auto-format = true
language-servers = ["volar"]
formatter = { command = 'prettier', args = ["--parser", "vue"] }

[stefanfrede]

I went on a journey: vuejs/language-tools#4376.

[3210jr]

Thanks @stefanfrede! This was very helpful! were you able to get go to definition working?

[stefanfrede]

Thanks @stefanfrede! This was very helpful! were you able to get go to definition working?

It seems to work for me.

[mabasic]

I had to use absolute paths /home/me, when using ~/ it did not work. This will probably save someone a couple of hours of head banging xD

[Nikita0x]

@stefanfrede Thank you so much! Your config finally worked for me as well in Vue! I was ready to give up on Helix tbh, thank you!

[Yutsuten]

Actually I found two ways to configure Vue's LSP: with hybridMode = false and with hybridMode = true.

What is Hybrid Mode?

Hybrid mode was added to @vue/language-server at v2.0.0, and the default was true. Lots of compatibility issues were found, so at v2.0.7 it would default to false, but only for VSCode I think [1]. Now, seems that it defaults to auto [2] (again, for VSCode only). Neovim or Helix users still get the default of true [3].

There is more written about it in the README. Find the text "How to configure vue language server with neovim and lsp?", click on it to expand some recommendations.

I did this research to better decide whether to enable or disable it.

With hybridMode = false

The hybridMode = false way is the one written in another answers here. For me, the tsserver and vue-language-server are installed through the package manager, so I don't need to add the path to the binaries in my configuration.

[language-server.typescript-language-server.config]
plugins = [{ name = "@vue/typescript-plugin", location = "/usr/bin/vue-language-server", languages = ["vue"] }]

[language-server.vuels.config]
vue = { hybridMode = false }

[[language]]
name = "vue"
language-servers = [ "vuels", "typescript-language-server" ]

It may be better to use "typeScriptPluginOnly" instead of false, I'm not sure. vuejs/language-tools#4226

With hybridMode = true

The hybridMode = true is the default if not set.

[language-server.typescript-language-server.config]
plugins = [{ name = "@vue/typescript-plugin", location = "/usr/bin/vue-language-server", languages = ["vue"] }]

[language-server.typescript-language-server.config.vue.inlayHints]
includeInlayEnumMemberValueHints = true
includeInlayFunctionLikeReturnTypeHints = true
includeInlayFunctionParameterTypeHints = true
includeInlayParameterNameHints = "all"
includeInlayParameterNameHintsWhenArgumentMatchesName = true
includeInlayPropertyDeclarationTypeHints = true
includeInlayVariableTypeHints = true

[[language]]
name = "vue"
language-servers = [ "vuels", "typescript-language-server" ]

This [language-server.typescript-language-server.config.vue.inlayHints] is required to tsserver behave like it does for typescript and javascript. All I did was to copy the default configuration for typescript and replace typescript with vue in the header.

What I chose

For now I'm going to use the hybridMode = true setting, seems to be the "preferred" way.

I hope this helps someone.

[markmanueldev]

I love you so much bro, yours are the only one that worked for me.

[ysooqe]

With this exact config (hybridMode=true), the typescript-language-server seems to treat the entire .vue file as a typescript file and shows a lot of errors on every single line.
Anyone has an idea what I might be doing wrong?

[Yutsuten]

@ysooqe Are you sure you have @vue/typescript-plugin and vue-language-server installed? The issue you see happens when @vue/typescript-plugin is not working properly.

---

Unrelated to the last reply, I noticed that showing the documentation for the hovered item under cursor (Space + k) stopped working for me since some update. And I can't make it work with hybridMode = true anymore. Auto-complete still works though. Seems that language-server.typescript-language-server.config.vue.inlayHints is not being applied, but I'm unable to find a way to make it work.

By using the documentation I wrote earlier,

There is more written about it in the README. Find the text "How to configure vue language server with neovim and lsp?", click on it to expand some recommendations.

I found two other ways to make this work with hybridMode = false:

Use vuels for all .{vue,js,ts,tsx,jsx} files.

Here we don't use typescript-language-server at all (you still need it installed though).

[language-server.vuels]
config = { vue = { hybridMode = false }, typescript = { tsdk = "node_modules/typescript/lib/" } }

[[language]]
name = "typescript"
language-servers = [ "vuels" ]

[[language]]
name = "tsx"
language-servers = [ "vuels" ]

[[language]]
name = "javascript"
language-servers = [ "vuels" ]

[[language]]
name = "jsx"
language-servers = [ "vuels" ]

Switch between vuels and typescript-language-server

Here we use vuels for only .vue files and typescript-language-server for .ts .tsx .js .jsx files.

[language-server.vuels]
config = { vue = { hybridMode = false }, typescript = { tsdk = "node_modules/typescript/lib/" } }
 
[language-server.typescript-language-server.config]
plugins = [{ name = "@vue/typescript-plugin", location = "/usr/bin/vue-language-server", languages = ["vue"] }]

A bug in helix?

One may notice this verbose configuration I'm doing:

[language-server.vuels]
config = { vue = { hybridMode = false }, typescript = { tsdk = "node_modules/typescript/lib/" } }

Why not the bellow?

[language-server.vuels.config]
vue = { hybridMode = false }

Well, it should work, actually. typescript = { tsdk = "node_modules/typescript/lib/" } is the default as you can see here. But in v25.01.1 it isn't. Why? I don't know. Maybe an issue in how helix is reading the configuration. I'm using the project's .helix/languages.toml for what it's worth.

[ysooqe]

@Yutsuten
here is the relevant part of my languages.toml (I have substituted my username with <user>):

[[language]]
name = "vue"
language-servers = [ "vuels", "typescript-language-server" ]

[language-server.vuels]
config.typescript.tsdk = "/home/<user>/.cache/deno/npm/registry.npmjs.org/typescript/5.8.3/lib"

[[language-server.typescript-language-server.config.plugins]]
name = "@vue/typescript-plugin"
location = "/home/<user>/.cache/deno/npm/registry.npmjs.org/@vue/language-server"
languages = [ "vue" ]

This is the example file (default App.vue) where ALL lines are marked with an error:

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

Any ideas what I might be doing wrong?

[Brokkoli452]

I HAVE MADE IT 💯
Final languages.toml:

[language-server.vue-language-server]
command = "npx"
args = ["@vue/language-server", "--stdio"]

[language-server.typescript-language-server.config]
plugins = [
  { name = "@vue/typescript-plugin", location = "@vue/language-server", languages = ["vue"] }
]

[[language]]
name = "vue"
scope = "source.vue"
injection-regex = "vue"
file-types = ["vue"]
language-servers = ["vue-language-server", "typescript-language-server"]

---

● What I fixed to get Vue support working in Helix:

Main issues I had:

1. No proper Vue support (lint, completion)
2. Global vs local install — the Vue language server must be installed locally in the project.
3. Outdated TypeScript configs — older typescript-language-server versions don’t support --tsserver-path.

What I changed:

1. Installed the Vue Language Server locally

   npm install --save-dev @vue/language-server

   This is key — Vue LS needs to live in the project, not globally.

2. Correct config to launch via npx

   [language-server.vue-language-server]
   command = "npx"
   args = ["@vue/language-server", "--stdio"]

   npx automatically resolves the locally installed package from node_modules.

3. Added the TypeScript plugin for Vue

   [language-server.typescript-language-server.config]
   plugins = [
     { name = "@vue/typescript-plugin", location = "@vue/language-server", languages = ["vue"] }
   ]

4. Proper Vue language definition

   [[language]]
   name = "vue"
   scope = "source.vue"
   injection-regex = "vue"
   file-types = ["vue"]
   language-servers = ["vue-language-server", "typescript-language-server"]

Why this works:

• Vue Language Server is now in the project’s node_modules.
• npx runs it from the correct directory with access to tsconfig.json and package.json.
• The TypeScript plugin bridges Vue and TypeScript.
• Helix is launched from the project root, where all config files are present.

Key takeaway: modern language servers should be installed locally in the project, not globally.

Final languages.toml:

[language-server.vue-language-server]
command = "npx"
args = ["@vue/language-server", "--stdio"]

[language-server.typescript-language-server.config]
plugins = [
  { name = "@vue/typescript-plugin", location = "@vue/language-server", languages = ["vue"] }
]

[[language]]
name = "vue"
scope = "source.vue"
injection-regex = "vue"
file-types = ["vue"]
language-servers = ["vue-language-server", "typescript-language-server"]

[christ-offer]

EDIT: actually nevermind, unless I install typescript in the vue project I am working on, even though everything is green and looks like its working, the vuels won't load - However this only applies to typescript for some reason - I dont have to have the @vue/language-server installed locally in my project. Weird?

For me this is working perfectly fine with vue/ts and eslint language servers. And I have everything installed globally.

[language-server.deno-lsp]
command = "deno"
args = ["lsp"]
config = { deno = { enable = true } }
required-root-patterns = ["deno.json", "deno.jsonc"]

[language-server.typescript-language-server]
required-root-patterns = ["package.json"]

# Vue Related Setup
[language-server.typescript-language-server.config]
plugins = [{  name = "@vue/typescript-plugin", location = "/home/chris/.volta/tools/shared/@vue/language-server", languages = ["vue"] }]
tsserver = { path = "/home/chris/.volta/tools/shared/typescript/lib" }


[[language]]
name = "vue"
language-servers = ["vuels", "vscode-eslint-language-server", "typescript-language-server"]

# Typescript / Deno setup
[[language]]
name = "typescript"
roots = ["deno.json", "deno.jsonc", "package.json"]
file-types = ["ts", "tsx"]
language-servers = ["deno-lsp", "typescript-language-server", "vscode-eslint-language-server"]

[[language]]
name = "javascript"
roots = ["deno.json", "deno.jsonc", "package.json"]
file-types = ["js", "jsx"]
language-servers = ["deno-lsp", "typescript-language-server", "vscode-eslint-language-server"]

[Himavanta]

This is my configuration after success: https://github.com/Himavanta/helix-config

[limzee]

2025-11-24T11:32:08.254 helix_term::commands::lsp [ERROR] Error requesting locations: request 4 timed out
2025-11-24T11:32:10.817 helix_term::handlers::document_colors [ERROR] document color request failed: request 6 timed out
Its noticing the errors but not managing to show them in the editor for some reason.

[Himavanta]

@limzee I used git on mac and debian to synchronize the exact same configuration, both of which are running normally. This is the configuration on my computer

npm ls -g
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[limzee]

Okay it works partially, for the script part but not the html part. I can see the html errors get logged but doesnt show in the editor.

[Himavanta]

@limzee I updated the configuration file, you can try the latest configuration, I solved the language server of html and css in the vue file locally, and the problem of request timeout was also solved.

By the way, there is no longer a need to install @vue/language-server inside the project

[limzee]

Sorry, how do you mean you solved it locally?