Version 2 stop working with nvim lsp

[RayGuo-ergou]

Update: check readme.

---

tldr:

local mason_registry = require('mason-registry')
local ts_plugin_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server/node_modules/@vue/typescript-plugin'

local servers = {
  tsserver = {
    init_options = {
      plugins = {
        {
          name = '@vue/typescript-plugin',
          location = ts_plugin_path,
          -- If .vue file cannot be recognized in either js or ts file try to add `typescript` and `javascript` in languages table.
          languages = { 'vue' },
        },
      },
    },
    filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  },
  volar = {},
}

local mason_lspconfig = require('mason-lspconfig')

-- Auto cmd (LspAttach) to setup keybind, codelens, and formatting stuff
-- I assume everyone should have this configured already but just for reference
-- @see https://github.com/RayGuo-ergou/dotfiles/blob/cdf866790b1daa27444bd9991025740c8eb74c5b/nvim/lua/ergou/util/lsp.lua#L43
Util.lsp.lsp_autocmd()

local capabilities = vim.lsp.protocol.make_client_capabilities()
-- If you need cmp
capabilities = vim.tbl_deep_extend('force', capabilities, require('cmp_nvim_lsp').default_capabilities())
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,
},
})

---

Hi,

I am having issue to run volar@2.0.1 with neovim lsp.

cmd: vue-language-server --stdio

With 1.8.27:

With 2.0.1:

[johnsoncodehk]

After 2.0, typescript support is fully implemented through typescript plugin. For IDEs other than VSCode, you need to install @vue/typescript-plugin(https://www.npmjs.com/package/@vue/typescript-plugin) separately, which will work with @vue/language-server.

I'm not sure how nvim configures the typescript plugin, if nvim can't configure it, you need to install @vue/typescript-plugin to the project or globally, and then configure it in tsconfig.

{
    "compilerOptions": {
        "plugins": [{ "name": "@vue/typescript-plugin" }]
    }
}

[RayGuo-ergou]

Hi @johnsoncodehk Thanks for your reply but I don't think the issue is caused by typescript as I created a new project without typescript using vite-create-vue, I still do not get auto completion and other cool stuffs.

"dependencies": {
    "vue": "^3.4.19"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.1.4"
  }

Never looked into volar source code but my guessing is that something's off with the communication between volar server and nvim lsp client.

I think I will just live with old version 1.8.27 for now.

[BitInByte]

Hey, I'm also facing the exact same issues. None of the lsp functionality works, even though it is able to attach successfully. I can also say that previously, the last version I had before updating was working without any issue

[adriaanbaelus]

Same here, the language server is running and attached to my vue file, but completely nonfunctional. Like @RayGuo-ergou, I've downgraded to 1.8.27 for now.

@johnsoncodehk I'm not clear on how the vue language server works, but for most neovim users, volar is installed globally with Mason, a sort of package manager for language servers. It installs a specific version of @vue/language-server in a specific location.
The next step is configuring the language server, which is usually done using nvim-lspconfig. In practice, it runs (the previously installed) @vue/language-server/bin/vue-language-server.js --stdio and passes the typescript tsdk as initializationOptions.
I'm guessing the default configuration there no longer works with the 2.0 release, but I have no idea what configuration is needed to get it right.
Is there any documentation on how to get the 2.x language server configured and running?

[WhyNotHugo]

Upgrading the LSP to 2.0.3 on neovim works for me. Note that the 2.0.0 release was broken, so be sure to install the latest patch version.

To confirm that the LSP is working, I opened a SFC and removed a <, at which point the LSP indicated an error in the corresponding end tag.

[WhyNotHugo]

I have installed @vue/typescript-plugin, but TypeScript support won't work for me.

Is it loaded automatically by the LSP? Any documentation/guide/example would be most welcome.

[WhyNotHugo]

packages/language-server/lib/types.ts defines initialisation options:

export type VueInitializationOptions = InitializationOptions & {
	typescript: {
		tsdk: string;
	}
	vue?: {
		/**
		 * @example ['vue1', 'vue2']
		 */
		additionalExtensions?: string[];
	};
};

The InitializationOptions interface is defined in https://github.com/volarjs/volar.js in packages/language-server/lib/types.ts:

export interface InitializationOptions {
	l10n?: {
		location: string; // uri
	};
	diagnosticModel?: DiagnosticModel;
	maxFileSize?: number;
	/**
	 * Extra semantic token types and modifiers that are supported by the client.
	 */
	semanticTokensLegend?: vscode.SemanticTokensLegend;
	codegenStack?: boolean;
}

The only relevant thing that I see is the typescript/tsdk field, but that one is not new, so I don't think that it is necessary. I don't see any obvious way to specify plug-ins, so maybe they don't need to be explicitly registered?

[RayGuo-ergou]

Hi @WhyNotHugo Thanks for your sharing, I have upgraded to 2.0.3 and some feature is back! (like the error check you mentioned)

But all javascript related things still not working for me. (e.g. go to definition, go to reference and lsp hover like ref)

Just asking are these things work for you in a javascript project?

[WhyNotHugo]

I have not tried a javascript project yet. I tried a typescript project, and error diagnostics only show up for the html template portion, but not for typescript code.

[jblyberg]

I was able to get everything working with 2.0.3. Here is my config (note, I use neoconf to tell lspconfig I'm using a volar project). I am also using typescript-tools instead of tsserver.

{
    "neovim/nvim-lspconfig",
    dependencies = {
      "pmizio/typescript-tools.nvim",
    },
    opts = {
      servers = {
        tsservercontext = {},
      },

      setup = {
        tsservercontext = function(_, opts)
          local neoconf = require("neoconf")
          local lspconfig = require("lspconfig")

          if neoconf.get("is-volar-project") then
            lspconfig["volar"].setup({
              server = opts,
              settings = {},
            })

            require("typescript-tools").setup({
              server = opts,
              settings = {
                tsserver_plugins = {
                  "@vue/typescript-plugin",
                },
              },
              filetypes = {
                "javascript",
                "typescript",
                "vue",
              },
            })
          else
            require("typescript-tools").setup({
              server = opts,
            })
          end

          return true
        end,
      },
    },
  }

Note specifically:

tsserver_plugins = {
  "@vue/typescript-plugin",
}

This works fine, however, volar still tries to fetch definitions in .vue files, so I get a "No information available" notice.

[chaozwn]

I was able to get everything working with 2.0.3. Here is my config (note, I use neoconf to tell lspconfig I'm using a volar project). I am also using typescript-tools instead of tsserver.

{
    "neovim/nvim-lspconfig",
    dependencies = {
      "pmizio/typescript-tools.nvim",
    },
    opts = {
      servers = {
        tsservercontext = {},
      },

      setup = {
        tsservercontext = function(_, opts)
          local neoconf = require("neoconf")
          local lspconfig = require("lspconfig")

          if neoconf.get("is-volar-project") then
            lspconfig["volar"].setup({
              server = opts,
              settings = {},
            })

            require("typescript-tools").setup({
              server = opts,
              settings = {
                tsserver_plugins = {
                  "@vue/typescript-plugin",
                },
              },
              filetypes = {
                "javascript",
                "typescript",
                "vue",
              },
            })
          else
            require("typescript-tools").setup({
              server = opts,
            })
          end

          return true
        end,
      },
    },
  }

Note specifically:

tsserver_plugins = {
  "@vue/typescript-plugin",
}

This works fine, however, volar still tries to fetch definitions in .vue files, so I get a "No information available" notice.

My thoughts are the same as yours: typescript-tools.nvim is used for handling ts and js files, while volar is used for handling vue files. However, it seems that there are currently issues with volar.

[RayGuo-ergou]

I got the lsp working with only typscript-tool plugin ( so no volar notify upon hover ). Huge thanks to @jblyberg.

My config:

      mason_lspconfig.setup({
        ensure_installed = vim.tbl_keys(servers),
        handlers = {
          function(server_name)
            local server = servers[server_name] or {}
            server.on_attach = on_attach
            server.capabilities = vim.tbl_deep_extend('force', {}, capabilities, server.capabilities or {})
            -- inherit my volar settings, you can just add vue to the `typescript-tools` filetypes.
            if server_name == 'volar' then
              require('typescript-tools').setup(server)
            else
              require('lspconfig')[server_name].setup(server)
            end
          end,
        },
      })

The @vue/typescript-plugin need to be defined in tsconfig.json as Johnson mentioned. ( make sure you have it installed)

{
    "compilerOptions": {
        "plugins": [{ "name": "@vue/typescript-plugin" }]
    }
}

[WhyNotHugo]

Oh, I had assumed that "typescript plugin" meant "a plugin that adds typescript support to this language server".

Did I misunderstand this and "typescript plugin" is a actually plugin for tsserver that adds vue support to it?

I'm a bit confused about volar's role if that's the case. If the typescript plugin gives tsserver the ability to handle vue code, why do I still need to keep around volar?

[jblyberg]

I'm a bit confused about volar's role if that's the case. If the typescript plugin gives tsserver the ability to handle vue code, why do I still need to keep around volar?

I believe that volar provides language server support inside template tags and is also required by the vue typescript plugin.