Neovim Setup Guide: Vue Language Server v3.0+

[d13g0]

Neovim Setup Guide: Vue Language Server v3.0+ (Hybrid Mode)

Quick Navigation

1. Background - Understand the problem and why this guide exists
2. Understanding Your LSP Setup - Identify which setup pattern you have
3. How to Identify Your Setup Pattern - Step-by-step identification guide
4. Solution for Neovim - Complete solutions for all setup patterns
   • Solution A: Mason + lspconfig (Most Common)
   • Solution B: Manual lspconfig
   • Solution C: Project-local node_modules
5. Installation - Install required packages
6. Verification - Confirm everything works
7. Troubleshooting - Fix common issues

---

Background

This guide is for Neovim users setting up Vue 3/Nuxt 3 LSP support. Neovim uses Language Server Protocol (LSP) for features like go-to-definition, autocomplete, and type checking.

Common tools:

• nvim-lspconfig: Plugin to configure LSP servers
• Mason: Package manager for LSP servers (like npm for Neovim)
• Lazy.nvim: Plugin manager

Problem

After upgrading to Vue Language Server v3.0+, LSP navigation (gd = go-to-definition, gr = find references) stops working in .vue files.

Error message:

Could not find `ts_ls`, `vtsls`, or `typescript-tools` lsp client required by `vue_ls`.

Cause

Vue Language Server v3.0+ removed take-over mode (#5248).

Old setup (take-over mode): vue_ls handled everything
New setup (hybrid mode):

• vue_ls handles template + CSS
• ts_ls handles TypeScript/JavaScript (including <script> in .vue files)
• Both must be attached to the same buffer

Understanding Your LSP Setup

Before applying the fix, you need to identify how your Neovim LSP is configured. There are three common patterns:

Pattern 1: Mason + lspconfig with Handlers (Most Common)

Your LSP servers are configured in a servers table and installed automatically via Mason handlers.

Key files:

• lua/plugins/lsp.lua or similar - Contains the servers table
• Look for: require('mason-lspconfig').setup { handlers = { ... } }

Pattern 2: Manual lspconfig Setup

Each LSP server is manually configured with require('lspconfig').server_name.setup().

Key files:

• lua/plugins/lsp.lua or init.lua
• Look for: require('lspconfig').ts_ls.setup({ ... })

Pattern 3: Custom LSP Configuration

You have a custom setup with vim.lsp.start() or other patterns.

---

How to Identify Your Setup Pattern

Not sure which pattern you have? Run these commands in Neovim:

1. Find your LSP configuration file:

   :Telescope find_files

   Then search for: lsp.lua or lspconfig

2. Open the file and look for these patterns:

   Pattern 1 indicators:

   • require('mason-lspconfig').setup
   • handlers = { function(server_name) ... }
   • A servers table (usually near the top)

   Pattern 2 indicators:

   • Multiple require('lspconfig').ts_ls.setup({ ... })
   • Multiple require('lspconfig').lua_ls.setup({ ... })
   • Each server configured individually

3. Still not sure?

   • If you're using a popular starter config (like kickstart.nvim, LazyVim, NvChad), you're likely using Pattern 1
   • Check your plugin manager config - if you see williamboman/mason-lspconfig.nvim, you're probably using Pattern 1

---

Solution for Neovim

Choose the solution that matches your setup pattern:

Solution A: Mason + lspconfig with Handlers (Recommended)

If your config uses mason-lspconfig with handlers (Pattern 1), modify your LSP configuration file:

1. Add Vue plugin to ts_ls server configuration:

Find your servers table (usually in lua/plugins/lsp.lua) and add/modify the ts_ls entry:

-- Inside your config function (where you see 'require('mason-lspconfig').setup')
local servers = {
  -- ... your existing servers (pyright, lua_ls, etc.) ...

  -- Add or modify these two entries:
  ts_ls = {
    filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
    init_options = {
      plugins = {
        {
          name = '@vue/typescript-plugin',
          location = vim.fn.stdpath('data') .. '/mason/packages/vue-language-server/node_modules/@vue/language-server',
          languages = { 'vue' },
        },
      },
    },
  },

  vue_ls = {}, -- Vue language server (handles template + CSS)
}

2. Add autocmd to ensure ts_ls attaches to Vue files:

Add this after your mason-lspconfig.setup() call (but still inside your config function):

-- IMPORTANT: Add this AFTER your mason-lspconfig.setup() and capabilities setup
-- This ensures ts_ls attaches to .vue files (required for Neovim 0.11+)
vim.api.nvim_create_autocmd('FileType', {
  pattern = 'vue',
  callback = function(args)
    local root_dir = vim.fs.root(args.buf, { 'package.json', 'tsconfig.json', 'jsconfig.json' })

    -- Copy init_options from servers table
    local init_options = vim.deepcopy(servers.ts_ls.init_options)

    -- Ensure plugin location is set
    local mason_path = vim.fn.stdpath('data') .. '/mason/packages/vue-language-server/node_modules/@vue/language-server'
    if vim.fn.isdirectory(mason_path) == 1 then
      init_options.plugins[1].location = mason_path
    end

    vim.lsp.start({
      name = 'ts_ls',
      cmd = { 'typescript-language-server', '--stdio' },
      root_dir = root_dir,
      init_options = init_options,
      capabilities = capabilities, -- Should be defined earlier in your config
    })
  end,
})

Complete example for Pattern 1:

Click to see full lsp.lua example (lazy.nvim + mason-lspconfig)

return {
  'neovim/nvim-lspconfig',
  dependencies = {
    'williamboman/mason.nvim',
    'williamboman/mason-lspconfig.nvim',
    'hrsh7th/cmp-nvim-lsp',
  },
  config = function()
    -- Your existing LSP setup (diagnostics, keybindings, etc.)

    -- Define servers
    local servers = {
      lua_ls = {
        settings = {
          Lua = {
            diagnostics = { globals = { 'vim' } },
          },
        },
      },

      -- TypeScript/JavaScript with Vue support
      ts_ls = {
        filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
        init_options = {
          plugins = {
            {
              name = '@vue/typescript-plugin',
              location = vim.fn.stdpath('data') .. '/mason/packages/vue-language-server/node_modules/@vue/language-server',
              languages = { 'vue' },
            },
          },
        },
      },

      -- Vue language server
      vue_ls = {},
    }

    -- Setup capabilities
    local capabilities = vim.lsp.protocol.make_client_capabilities()
    capabilities = vim.tbl_deep_extend('force', capabilities, require('cmp_nvim_lsp').default_capabilities())

    -- Setup mason-lspconfig with handlers
    require('mason-lspconfig').setup({
      ensure_installed = vim.tbl_keys(servers),
      handlers = {
        function(server_name)
          local server = servers[server_name] or {}
          server.capabilities = vim.tbl_deep_extend('force', {}, capabilities, server.capabilities or {})
          require('lspconfig')[server_name].setup(server)
        end,
      },
    })

    -- Ensure ts_ls attaches to Vue files
    vim.api.nvim_create_autocmd('FileType', {
      pattern = 'vue',
      callback = function(args)
        local root_dir = vim.fs.root(args.buf, { 'package.json', 'tsconfig.json', 'jsconfig.json' })
        local init_options = vim.deepcopy(servers.ts_ls.init_options)

        local mason_path = vim.fn.stdpath('data') .. '/mason/packages/vue-language-server/node_modules/@vue/language-server'
        if vim.fn.isdirectory(mason_path) == 1 then
          init_options.plugins[1].location = mason_path
        end

        vim.lsp.start({
          name = 'ts_ls',
          cmd = { 'typescript-language-server', '--stdio' },
          root_dir = root_dir,
          init_options = init_options,
          capabilities = capabilities,
        })
      end,
    })
  end,
}

---

Solution B: Manual lspconfig Setup

If you manually call require('lspconfig').server_name.setup() for each server (Pattern 2):

local lspconfig = require('lspconfig')
local capabilities = require('cmp_nvim_lsp').default_capabilities()

-- TypeScript server with Vue plugin
lspconfig.ts_ls.setup({
  capabilities = capabilities,
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  init_options = {
    plugins = {
      {
        name = '@vue/typescript-plugin',
        location = vim.fn.stdpath('data') .. '/mason/packages/vue-language-server/node_modules/@vue/language-server',
        languages = { 'vue' },
      },
    },
  },
})

-- Vue language server
lspconfig.vue_ls.setup({
  capabilities = capabilities,
})

-- Ensure ts_ls attaches to Vue files
vim.api.nvim_create_autocmd('FileType', {
  pattern = 'vue',
  callback = function(args)
    local root_dir = vim.fs.root(args.buf, { 'package.json' })
    local mason_path = vim.fn.stdpath('data') .. '/mason/packages/vue-language-server/node_modules/@vue/language-server'

    vim.lsp.start({
      name = 'ts_ls',
      cmd = { 'typescript-language-server', '--stdio' },
      root_dir = root_dir,
      init_options = {
        plugins = {
          {
            name = '@vue/typescript-plugin',
            location = mason_path,
            languages = { 'vue' },
          },
        },
      },
      capabilities = capabilities,
    })
  end,
})

---

Solution C: Project-local node_modules

If you installed Vue Language Server in your project (not via Mason):

-- Adjust the location path to point to your project's node_modules
ts_ls = {
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  init_options = {
    plugins = {
      {
        name = '@vue/typescript-plugin',
        -- Use project node_modules instead of Mason
        location = vim.fn.getcwd() .. '/node_modules/@vue/language-server',
        languages = { 'vue' },
      },
    },
  },
}

Installation

Using Mason (recommended):

:Mason

Install:

• vue-language-server
• typescript-language-server

Or using npm in your project:

npm install -D @vue/language-server typescript typescript-language-server

Verification

1. Open a .vue file in Neovim
2. Run :LspInfo (in normal mode, type :LspInfo then Enter)
3. Verify both servers are attached:

   Active Clients:
   - vue_ls (id: 1)
     - Attached buffers: 1
   - ts_ls (id: 2)
     - Attached buffers: 1
   

4. Test: Put cursor on a component name, press gd (should jump to definition)

For Nuxt 3 Users

Ensure tsconfig.json extends Nuxt's generated types:

{
  "extends": "./.nuxt/tsconfig.json"
}

Generate type definitions:

npx nuxt prepare

Troubleshooting

Still not working?

1. Check plugin path is correct:

   :lua print(vim.inspect(vim.lsp.get_clients({name='ts_ls'})[1].config.init_options))

   Should show the @vue/typescript-plugin with a valid location path.

2. Check LSP logs:

   :lua vim.cmd('e ' .. vim.lsp.get_log_path())

3. Adjust the location path in init_options based on where @vue/language-server is installed on your system.

Environment Tested

• Neovim 0.10+ / 0.11+
• nvim-lspconfig (latest)
• vue-language-server v3.2.2
• Vue 3 / Nuxt 3 projects

References

• Vue Language Tools v3.0 changelog
• nvim-lspconfig documentation

[s3rgeym]

I was just trying to set up vue_ls, which kept saying it couldn't find ts_ls or vtsls, and I came across your instructions. They seemed a bit off to me. So I did some more googling and found this: https://github.com/vuejs/language-tools/wiki/Neovim. Based on that guide and partly on yours, I’ve put together a working config:

return {
  "neovim/nvim-lspconfig",
  dependencies = {
    -- opts передается для автоматического вызова setup
    { "mason-org/mason.nvim", opts = {} },
    "williamboman/mason-lspconfig.nvim",
    "neovim/nvim-lspconfig",
    "saghen/blink.cmp",
  },
  config = function()
    -- Обзяательно должен вызываться первым
    require("mason-lspconfig").setup({
      -- Тут объявлены языковые сервера, которые нужно поставить через Mason
      ensure_installed = {
        "bashls",
        "biome",
        "cssls",
        "docker_language_server",
        "html",
        "jsonls",
        "lua_ls",
        "ruff",
        "stylua",
        --  "ts_ls",
        "vimls",
        "vtsls",
        "vue_ls",
        "yamlls",
      },
    })

    local capabilities = vim.lsp.protocol.make_client_capabilities()
    capabilities = vim.tbl_deep_extend(
      "force",
      capabilities,
      require("blink.cmp").get_lsp_capabilities()
    )

    -- Мы тут задаем настройки для всех серверов, и подгружаем пользовательские конфиги
    vim.lsp.config("*", {
      capabilities = capabilities,
      root_markers = { ".git" },
    })

    -- https://github.com/vuejs/language-tools/wiki/Neovim
    local vue_language_server_path = vim.fn.stdpath("data")
      .. "/mason/packages/vue-language-server/node_modules/@vue/language-server"

    local tsserver_filetypes = {
      "typescript",
      "javascript",
      "javascriptreact",
      "typescriptreact",
      "vue",
    }

    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 = tsserver_filetypes,
    }

    local ts_ls_config = {
      init_options = {
        plugins = {
          vue_plugin,
        },
      },
      filetypes = tsserver_filetypes,
    }

    vim.lsp.config("vtsls", vtsls_config)
    vim.lsp.config("ts_ls", ts_ls_config)
    
    -- ...
  end,
}

[s3rgeym]

But it's better to define language server settings in separate files.

~/.config/nvim/after/lsp/vtsls.lua

-- vue_ls не будет работать без этих настроек
-- @see <https://github.com/vuejs/language-tools/wiki/Neovim>
local vue_language_server_path = vim.fn.stdpath("data")
  .. "/mason/packages/vue-language-server/node_modules/@vue/language-server"

local tsserver_filetypes = {
  "typescript",
  "javascript",
  "javascriptreact",
  "typescriptreact",
  "vue",
}

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

return {
  settings = {
    vtsls = {
      tsserver = {
        globalPlugins = {
          vue_plugin,
        },
      },
    },
  },
  filetypes = tsserver_filetypes,
}

[pixlmint]

2. Add autocmd to ensure ts_ls attaches to Vue files:
   Add this after your mason-lspconfig.setup() call (but still inside your config function):

Why is this necessary? I have my lsp configuration in after/lsp/ts_ls.ua , and having just the init_options and filetypes set there is working just fine, no autocmd needed.