Neovim

Installing

Install globally with npm

npm install -g @vue/language-server

Install with mason

:MasonInstall vue-language-server

Configuration

Important

V3 ONLY work with vtsls, as ts_ls does not handle typescript.tsserverRequest command.

Important

If you are on the recent nvim-lspcofing, you do NOT have to config on_init. See: https://github.com/neovim/nvim-lspconfig/pull/3943

Important

vue_ls was renamed from volar in nvim-lspconfig and mason Mason PR: https://github.com/mason-org/mason-lspconfig.nvim/pull/561 nvim-lspconfig PR: https://github.com/neovim/nvim-lspconfig/pull/3843

Important

For lazyvim user, since mason is locked at version 1 in lazyvim, please read through this issue for more information: https://github.com/LazyVim/LazyVim/issues/6236

-- If you are using mason.nvim, you can get the ts_plugin_path like this
-- For Mason v1,
-- local mason_registry = require('mason-registry')
-- local vue_language_server_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server'
-- For Mason v2,
-- local vue_language_server_path = vim.fn.expand '$MASON/packages' .. '/vue-language-server' .. '/node_modules/@vue/language-server'
-- or even
-- local vue_language_server_path = vim.fn.stdpath('data') .. "/mason/packages/vue-language-server/node_modules/@vue/language-server"
local vue_language_server_path = '/path/to/@vue/language-server'
local vue_plugin = {
  name = '@vue/typescript-plugin',
  location = vue_language_server_path,
  languages = { 'vue' },
  configNamespace = 'typescript',
}
local vtsls_config = {
  settings = {
    vtsls = {
      tsserver = {
        globalPlugins = {
          vue_plugin,
        },
      },
    },
  },
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
}
-- If you are on most recent `nvim-lspconfig`
local vue_ls_coonfig = {}
-- If you are not on most recent `nvim-lspconfig` or you want to override
local vue_ls_config = {
  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 find `vtsls` lsp client, `vue_ls` 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,
}
-- nvim 0.11 or above
vim.lsp.config('vtsls', vtsls_config)
vim.lsp.config('vue_ls', vue_ls_config)
vim.lsp.enable({'vtsls', 'vue_ls'})

-- nvim below 0.11
local lspconfig = require('lspconfig')
lspconfig.vtsls.setup vtsls_config
lspconfig.vue_ls.setup vue_ls_config

I am not and do not want to use nvim-lspconfig

To make the lsp work without nvim-lspconig the only extra options you have to maintain are cmd, filetypes and root_markers.(Assume you are on nvim 0.11)

Custom Component Highlight

Since 3.0.2, semantic tokens are handled on the vue_ls side rather than tsserver, and the token name has changed, to adopt this change you have to:

1. set client.server_capabilities.semanticTokensProvider.full = true (To be fixed, see #5542), you can also set this to false for vtsls if the filetype is vue.
2. Set highlight group @lsp.type.component, to preserve the old behavior you can link it to @type

nvim-cmp integration

Check out this discussion

Currently does not work with nvim-treesitter's main branch.

Vue 2 Support

Please make sure you are using ~3.0(0 as minor version) for vue 2 support.

For more information please see: https://github.com/vuejs/language-tools/discussions/5455