Vue's LSP only partially supported

[DoctorRyner]

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

[DoctorRyner]

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

[DoctorRyner]

@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.