Hybrid mode configuration (Requires @vue/language-server version ^2.0.0)

Note: The "Take Over" mode has been discontinued. Instead, a new "Hybrid" mode has been introduced. In this mode, the Vue Language Server exclusively manages the CSS/HTML sections. As a result, you must run @vue/language-server in conjunction with a TypeScript server that employs @vue/typescript-plugin. Below is a streamlined configuration for Neovim's LSP, updated to accommodate the language server following the upgrade to version 2.0.0.

For nvim-lspconfig versions below v1.0.0 use tsserver instead of ts_ls, e.g. lspconfig.ts_ls.setup

1-- If you are using mason.nvim, you can get the ts_plugin_path like this
2-- local mason_registry = require('mason-registry')
3-- local vue_language_server_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server'
4
5local vue_language_server_path = '/path/to/@vue/language-server'
6
7local lspconfig = require('lspconfig')
8
9lspconfig.ts_ls.setup {
10  init_options = {
11    plugins = {
12      {
13        name = '@vue/typescript-plugin',
14        location = vue_language_server_path,
15        languages = { 'vue' },
16      },
17    },
18  },
19  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
20}
21
22-- No need to set `hybridMode` to `true` as it's the default value
23lspconfig.volar.setup {}

Non-Hybrid mode(similar to takeover mode) configuration (Requires @vue/language-server version ^2.0.7)

Note: If hybridMode is set to false Volar will run embedded ts_ls therefore there is no need to run it separately.

For more information see #4119

Make sure you have typescript installed globally or pass the location to volar

Use volar for all .{vue,js,ts,tsx,jsx} files.

1local lspconfig = require('lspconfig')
2
3-- lspconfig.ts_ls.setup {} 
4lspconfig.volar.setup {
5  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
6  init_options = {
7    vue = {
8      hybridMode = false,
9    },
10  },
11}

Use volar for only .vue files and ts_ls for .ts and .js files.

1local lspconfig = require('lspconfig')
2
3lspconfig.ts_ls.setup {
4  init_options = {
5    plugins = {
6      {
7        name = '@vue/typescript-plugin',
8        location = '/path/to/@vue/language-server',
9        languages = { 'vue' },
10      },
11    },
12  },
13}
14
15lspconfig.volar.setup {
16  init_options = {
17    vue = {
18      hybridMode = false,
19    },
20  },
21}

nvim-cmp integration

Check out this discussion