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, if you are using ts_ls, either switch to vtsls or create an issue on ts_ls. See: https://github.com/yioneko/vtsls/issues/249#issuecomment-2866277424 and https://github.com/yioneko/vtsls/blob/main/packages/service/patches/260-allow-any-tsserver-commands.patch for the reference.

-- 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 = {
  init_options = {
    plugins = {
      vue_plugin,
    },
  },
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
}
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 found `vtsls` lsp client, vue_lsp would not work with 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({
        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

nvim-cmp integration

Check out this discussion

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

Vue 2 Support

Vue 2 support has be removed in v3, if you want to use vue_lsp with vue 2 please install @vue/language-server@2 and follow these steps:https://github.com/vuejs/language-tools/tree/v2?tab=readme-ov-file#community-integration_