Versions 3 Upgrade guide for none-vscode editors.

[RayGuo-ergou]

TLDR: In version 3, there's one breaking change that require handled at lsp client side. For example, see how neovim config it here

What has changed and why?

For the user side, there are two things changed:

1. The way vue language server communicate with typescript language server.
   In version 2, in order to drop the takeover mode for a more compatible solution with typescript language server, another layer of complexity was introduced (named pipes server) to help vue language server communicate with typescript language server(vue tsserver plugin). However, it seems caused many issues since v2 was released. Therefore, in the new major version, it has been removed and the responsibility of communication transferred to the lsp client side.

2. Option typescript.tsdk has dropped.
   Now typescript is a peer dependency. See detail here

How do I migrate to version 3?

Migrating to version 3 is quite simple, create a client handler for vue language server, when receiving the request, forward it to typescript language server and finally send the payload from typescript language server back to vue language server. We have an example for neovim users here.

FAQ

What's the request and response name I should handle/send to vue language server?

The request and response names are not configurable:

1. Request(receive from vue lsp): tsserver/request
2. Response(send to vue lsp): tsserver/response

Can I use any existing typescript language server?

No, vue LSP currently only work with vtsls.

The reason is that ts_ls Currently does not handle the command typescript.tsserverRequest see: https://github.com/typescript-language-server/typescript-language-server/blob/0a034dae6c777733f4c2f6d5b151c5ef781fb662/src/lsp-server.ts#L838-L940

Since https://github.com/typescript-language-server/typescript-language-server/releases/tag/v4.4.0, both vtsls and ts_ls are supported.

I cannot get it to work.

If you cannot get the vue language server to work, there's few things you can check yourself first:

1. Is the typescript language server plugin path correct? We recommend to use the same path as vue language server as the typescript plugin is a dependency of vue language server.
2. Since you are likely to handle the request yourself, it's really easy to just log things like what vue LSP send via tsserver/request and what's the typescript language server response etc.

If thing really not working on your machine please open a new issue with a Minimal Reproduction for both your vue project and editor configuration. (We do not have experience in all editors, so we might need the community's help.)

[oaleynik]

Hey guys 👋🏻

I'm encountering an error in a newly created project (using pnpm create vue). I'm using this exact snippet: https://github.com/vuejs/language-tools/wiki/Neovim. The vue-language-server is installed with Mason, so I'm using one of the options from there.

I obviously added a couple of log lines:

I'm sure I'm missing something simple. Thanks in advance!

[posva]

Thank you, I did try to disable that "volar" entry in the servers option but it's still started when I open a vue file

[RayGuo-ergou]

How did you disable it? I would suggest just remove the whole vue extra and manually config vtsls (since the only two other things are config vtsls and set treesitter ensure_install).

And if you can push your most recent nvim config to github I can troubleshot it on my machine.

[posva]

I tried both setting the server.volar to nil and removing the vue extra. In both cases the volar server still appears with LspInfo but it's missing the other vlts.
my dotfiles are at https://github.com/posva/dotfiles/tree/debug-volar (in the debug-volar branch)

[RayGuo-ergou]

Got things working with this in your lua/plugin/vue.lua

local vue_language_server_path = vim.fn.stdpath("data")
  .. "/mason/packages/vue-language-server/node_modules/@vue/language-server"
-- log it in a notification for testing
local vue_plugin = {
  name = "@vue/typescript-plugin",
  location = vue_language_server_path,
  languages = { "vue" },
  configNamespace = "typescript",
  enableForWorkspaceTypeScriptVersions = true,
}

return {
  -- recommended = function()
  --   return LazyVim.extras.wants({
  --     ft = "vue",
  --     root = { "vue.config.js" },
  --   })
  -- end,
  --
  {
    "nvim-treesitter/nvim-treesitter",
    opts = { ensure_installed = { "vue", "css" } },
  },

  {
    "neovim/nvim-lspconfig",
    opts = {
      servers = {
        volar = {
          on_init = function(client)
            client.handlers["tsserver/request"] = function(_, result, context)
              local clients = vim.lsp.get_clients({ bufnr = context.bufnr, name = "vtsls" })
              if #clients == 0 then
                vim.notify(
                  "Could not found `vtsls` lsp client, vue_lsp would not work without it.",
                  vim.log.levels.ERROR
                )
                return
              end
              local ts_client = clients[1]

              local param = unpack(result)
              local id, command, payload = unpack(param)
              ts_client:exec_cmd({
                title = "vue_request_forward", -- You can give title anything as it's used to represent a command in the UI, `:h Client:exec_cmd`
                command = "typescript.tsserverRequest",
                arguments = {
                  command,
                  payload,
                },
              }, { bufnr = context.bufnr }, function(_, r)
                local response_data = { { id, r.body } }
                ---@diagnostic disable-next-line: param-type-mismatch
                client:notify("tsserver/response", response_data)
              end)
            end
          end,
        },
        vtsls = {},
      },
    },
  },
  -- Add LSP servers
  {
    "neovim/nvim-lspconfig",
    opts = function(_, opts)
      table.insert(opts.servers.vtsls.filetypes, "vue")
      LazyVim.extend(opts.servers.vtsls, "settings.vtsls.tsserver.globalPlugins", {
        {
          name = "@vue/typescript-plugin",
          location = LazyVim.get_pkg_path("vue-language-server", "/node_modules/@vue/language-server"),
          languages = { "vue" },
          configNamespace = "typescript",
          enableForWorkspaceTypeScriptVersions = true,
        },
      })
    end,
  },
}

For the hover notification, i think one from html language server you can simply disable that in vue buffers, have no idea where's the 2nd one came from.

Let me break down what happened.

1. Your mason stays at v1 and I could not upgrade with :Lazy maybe locked by lazyvim, that's why you cannot get vue_ls but volar, because the renaming happened in the past few months. The reason why volar keep poping up is also because mason.
2. Your nvim-lspconfig is up to date in this branch, which means volar has renamed to vue_ls, meaning that now your vue lsp would not take any configuration from nvim-lspconfig but should be fine as there are all deprecated options.
3. I think you can re-enable vue extra if you know how to pass on_init or you can even create an autocmd on lspattached and add the handler, that should work the same. see: https://neovim.io/doc/user/lsp.html#LspAttach
4. The config inside after/lsp would not work for you as lazyvim has not adopt this way yet.
5. For the No information notification, you can override the notify function to not show the notification for the text matches No information ... if that really annoys you.

I really suggest you maintain your own nvim configuration because this things can happen, lazyvim is awesome but without few months maintenance, things will go wrong.

[posva]

mason is indeed blocked at v1 in LazyVim source code 😢 There is an open PR at LazyVim/LazyVim#6053 (comment) with a workaround. I used that and your version with vue_ls instead of volar and it works!

Thanks a ton for taking a look and helping me out ❤️

I really suggest you maintain your own nvim configuration because this things can happen, lazyvim is awesome but without few months maintenance, things will go wrong.

I know but I feel like it's the same issue otherwise: I will have to maintain it myself like I used to when it was vim and at some point things just break again 🫠

[AQian0]

It doesn't seem to be working correctly in Helix for me.

• Helix Version: 25.01.1
• OS: macOS

Here is my configuration:

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

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

[[language]]
name = "vue"
language-servers = ["vtsls"]

My setup is based on the discussion in helix-editor/helix#10691 and https://github.com/helix-editor/helix/blob/25.01.1/languages.toml#L119. The only modification I've made is removing the hybridMode and tsdk settings.

Am I missing any necessary configuration?

[RayGuo-ergou]

Hi I doubt you are using v3 of the lsp because it does require the request forwarding, if helix can only config the editor via toml file and there's no plugin system (as far as i know there's not) I would recommend just stay at v2 if everything goes right for v2.

[AQian0]

Hi I doubt you are using v3 of the lsp because it does require the request forwarding, if helix can only config the editor via toml file and there's no plugin system (as far as i know there's not) I would recommend just stay at v2 if everything goes right for v2.

It's working perfectly now, and the performance of vtsls is even better than I expected.

[johnsoncodehk]

I suspect that your configuration only uses vtsls + @vue/typescript-plugin, and does not enable @vue/language-server, it will not be able to support all Vue language features.

[AQian0]

I suspect that your configuration only uses vtsls + @vue/typescript-plugin, and does not enable @vue/language-server, it will not be able to support all Vue language features.

You're right, I forgot that I had removed the vue-language-server related configuration. I've re-added vuels to the language server for .vue files, and now everything seems to be working correctly.

helix --health vue
Configured language servers:
  ✓ vtsls: /usr/bin/vtsls
  ✓ vue-language-server: /usr/bin/vue-language-server
Configured debug adapter: None
Configured formatter: None
Tree-sitter parser: ✓
Highlight queries: ✓
Textobject queries: ✘
Indent queries: ✘

(This is on a different Arch Linux machine, so the paths are slightly different from before.)
The lsp-workspace-command in Helix now also shows Vue-related commands, which seem to be for template functionalities. Thanks for pointing that out.

[johnsoncodehk]

I don't think your current language feature complete if you don't have implement this.

• You must implement a handler for:

  • Requests: tsserver/request (from Vue LSP)
  • Responses: tsserver/response (to Vue LSP)

[yamafaktory]

Hi I have a follow-up question / issue :)

I'm using inlay hints (https://github.com/yamafaktory/.config/blob/2f18977151a3a2fccf90e942c083051f070514e8/nvim/init.lua#L668) and somehow facing this issue quite often:

Error in decoration provider "win" (ns=nvim.lsp.inlayhint):
Error executing lua: /usr/share/nvim/runtime/lua/vim/lsp/inlay_hint.lua:349: Invalid 'col': out of range
stack traceback:
        [C]: in function 'nvim_buf_set_extmark'
        /usr/share/nvim/runtime/lua/vim/lsp/inlay_hint.lua:349: in function </usr/share/nvim/runtime/lua/vim/lsp/inlay_hint.lua:303>

Any idea? Thanks!

[RayGuo-ergou]

Maybe related #5471

[xiaoliyooo]

I have a question about hover, why can't I hover to theESLint error on the template, but I can in the script? I'm guessing it has something to do with vue_ls and vtsls duties, but how do I make it possible to hover?
I can see the full error message in the diagnostic

中文准确描述:
大佬，我有一个关于hover的问题，为什么我在template中hover不出来ESLint的错误上，但在script中可以？这应该于vue_ls和 vtsls的职责有关，但如何才能实现hover展示？

我在diagnostic中能看到完整的错误信息。

Here is my config:

return function()
  local vue_language_server_path = vim.fn.expand('$MASON/packages')
    .. '/vue-language-server'
    .. '/node_modules/@vue/language-server'

  local vue_plugin = {
    name = '@vue/typescript-plugin',
    location = vue_language_server_path,
    languages = { 'vue' },
    configNamespace = 'typescript',
  }

  local shared_config = {
    suggest = { completeFunctionCalls = true },
    inlayHints = {
      parameterNames = { enabled = 'all', suppressWhenArgumentMatchesName = false },
      parameterTypes = { enabled = true },
      variableTypes = { enabled = true, suppressWhenTypeMatchesName = false },
      propertyDeclarationTypes = { enabled = true },
      functionLikeReturnTypes = { enabled = true },
      enumMemberValues = { enabled = true },
    },
  }

  local vtsls_config = {
    settings = {
      vtsls = {
        experimental = {
          completion = {
            enableServerSideFuzzyMatch = true,
          },
        },
        tsserver = {
          globalPlugins = {
            vue_plugin,
          },
        },
      },
      typescript = shared_config,
      javascript = shared_config,
    },
    filetypes = {
      'typescript',
      'javascript',
      'javascriptreact',
      'typescriptreact',
      'vue',
    },
    on_attach = function(client, bufnr)
      if vim.bo[bufnr].filetype == 'vue' then
        client.server_capabilities.semanticTokensProvider.full = false
      end
    end,
  }

  local vue_ls_config = {
    on_attach = function(client, bufnr)
      client.server_capabilities.semanticTokensProvider.full = true
    end,
  }

  vim.lsp.config('vtsls', vtsls_config) -- vue 文件 ts部分支持
  vim.lsp.config('vue_ls', vue_ls_config) -- vue文件 html css支持

  vim.lsp.enable({
    'vtsls',
    'vue_ls',
  })

  -- 注册LSP附加回调
  vim.api.nvim_create_autocmd('VimEnter', {
    callback = function()
      -- 设置高亮组 @lsp.type.component 链接到 @type 默认组件绿
      vim.api.nvim_command('highlight link @lsp.type.component @type')
      -- vim.api.nvim_set_hl(0, '@lsp.type.component', {
      --   fg = color_table.vue_component_color,
      --   bold = true,
      -- })
    end,
  })

  -- vim.lsp.inlay_hint.enable()
end

[RayGuo-ergou]

cannot reproduce on my end, and it has nothing to do with neither vus_ls or vtsls. It seems like you are using some plugin to prettify the diagnostic messages, try with neovim's native method first.

[xiaoliyooo]

emm, no it's not, it doesn't work for me using the native method either, I've tried both the Lspsaga hover_doc, vim.lsp.buf.hover, and the beautification plugin soulis-1256/eagle.nvim methods and they all use the native hover content, I must have lsp which config I forgot but I don't know which the problem

[RayGuo-ergou]

You are using the wrong method for checking diagnostic messages, see :h vim.diagnostic.open_float

To me there's nothing wrong with your config, you are just not calling the correct api.

[xiaoliyooo]

You're right. I'm dizzy. thanks

[polyzen]

typescript-language-server now supports tsserver/request:
https://github.com/typescript-language-server/typescript-language-server/releases/tag/v4.4.0

[RayGuo-ergou]

Thanks @polyzen I have added ts_ls into wiki.