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" }]
    }
}

[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?

[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.

[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.

[WhyNotHugo]

I installed @vue/typescript-plugin together with tsserver, but it still won't yield error diagnostics for a SFC file.

I'm taking a pretty straightforward approach here:

  tsserver = {
    -- I installed @vue/typescript-plugin inside this container:
    cmd = lsp_containers.command("tsserver"),
    settings = {
      tsserver_plugins = {
        "@vue/typescript-plugin",
      },
    },
    filetypes = {
      "javascript",
      "typescript",
      "vue",
    },
  },

For regular typescript files, tsserver can't seem to resolve those SFC. E.g.: for line import Header from "./components/Header.vue";, it shows:

Cannot find module './components/Header.vue' or its corresponding type declarations.

[chaozwn]

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" }]
    }
}

We have the same configuration, so why am I getting a tsserver error?

[WhyNotHugo]

Does @vue/typescript-plugin need to be installed with tsserver or within the current project's node_modules?

[chaozwn]

Does @vue/typescript-plugin need to be installed with tsserver or within the current project's node_modules?

you must use typescript-tools.nvim replace tsserver.

[jblyberg]

Does @vue/typescript-plugin need to be installed with tsserver or within the current project's node_modules?

What I've found (and I spent way too much time on this yesterday) is that tsserver doesn't (at least for me) load the vue typescript plugin. You can try for yourself. Look at the tsserver docs https://github.com/typescript-language-server/typescript-language-server/blob/master/docs/configuration.md .. You can specify plugin settings under initializationOptions but that doesn't seem to work. This issue seems to indicate that others have trouble with that setting, however, and I couldn't get tsserver to load that plugin. the typescript-tools package is more explicit about how to load tsconfig plugins and works, so I went with that.

[WhyNotHugo]

Sounds like loading plugins via tsserver is problematic or non-trivial. But the devs here must have figured out a way to load the plugin to test it and use it themselves. typescript-tools.nvim is neovim-specific, I don't think they'd target that exclusively.

[WhyNotHugo]

Oh, actually, what I'm using is typescript-language-server, not tsserver.

[WhyNotHugo]

Apparently the location field is also required when defining plugins: https://github.com/typescript-language-server/typescript-language-server/blob/b224b878652438bcdd639137a6b1d1a6630129e4/docs/configuration.md?plain=1#L27-L31

[gegoune]

you must use typescript-tools.nvim replace tsserver.

Are you saying that there currently is no way to make it work with tsserver or that above configuration targets typescript-tools.nvim?

I would rather not switch to software which warns about its early beta stage just yet.

[jblyberg]

I think it's entirely probable that I am just not initializing tsserver correctly--which I think is a documentation issue. As @johnsoncodehk said, non-VSCode editors have to handle this manually.

[jblyberg]

Apparently the location field is also required when defining plugins: https://github.com/typescript-language-server/typescript-language-server/blob/b224b878652438bcdd639137a6b1d1a6630129e4/docs/configuration.md?plain=1#L27-L31

Setting the location did not work for me either. Check out this issue which suggests that you can also just put anything in there like so:

plugins = {
  {
    name = "anything";
    location = "anything";
  };
};

That did not work either.

[WhyNotHugo]

I made it work! 🎉

  tsserver = {
    cmd = lsp_containers.command("tsserver"),
    init_options = {
      plugins = {
        {
          name = "@vue/typescript-plugin",
          location = "/usr/local/lib/node_modules/@vue/typescript-plugin",
          languages = {"typescript", "vue"},
        },
      },
    },
    filetypes = {
      "javascript",
      "typescript",
      "vue",
    },
  },

This shows error diagnostics on the <script> portion of SFC files.

[chaozwn]

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" }]
    }
}

null-ls format working properly?

[jblyberg]

I made it work! 🎉
This shows error diagnostics on the <script> portion of SFC files.

Interesting. I had not tried installing the plugin globally. I'd rather not have to do that but I'll give it a shot.

[jackcodetw]

@RayGuo-ergou It looks good, but this means if we want to use the non-hybrid mode, we must configure it like the previous takeover mode, letting Volar handle .ts files, right?

[RayGuo-ergou]

but this means if we want to use the non-hybrid mode, we must configure it like the previous takeover mode, letting Volar handle .ts files, right?

In general yes, but actually if you would like to use tsserver for none-vue project is also dealable for neovim users as the biggest advantage of using neovim is we have a program language to make our editor to the shape we want. (e.g. check if app.vue or src/app.vue exist in root).

[catgoose]

but this means if we want to use the non-hybrid mode, we must configure it like the previous takeover mode, letting Volar handle .ts files, right?

In general yes, but actually if you would like to use tsserver for none-vue project is also dealable for neovim users as the biggest advantage of using neovim is we have a program language to make our editor to the shape we want. (e.g. check if app.vue or src/app.vue exist in root).

Oh nice we can use takeover mode again? It seemed to work so much better for my setup. I use neoconf to accomplish takeover.

[RayGuo-ergou]

we can use takeover mode again?

Yes none-hybrid == take over 😜

[catgoose]

hybridMode = false,

This is kind of a nitpick but why use hybridMode pascal case when everything else uses snake case?

[RayGuo-ergou]

We use snake case in lua e.g. this time from nvim-lspconfig, but the init_options is send options to lsp. Every lsp may have different code style, pascal case is used in volar project.

[gegoune]

This is all pretty confusing. :)
Should I revert my changes I made upgrading to 2.x?

@@ -112,17 +112,21 @@ local servers = {
   tsserver = {
-    root_dir = function(fname)
-      if util.root_pattern('vite.config.ts')(fname) then return nil end
-      return util.root_pattern('tsconfig.json', 'package.json', 'jsconfig.json', '.git')(fname)
-    end,
     init_options = {
+      plugins = {
+        {
+          name = '@vue/typescript-plugin',
+          location = '/Users/gegoune/.pnpm-global/5/node_modules/@vue/typescript-plugin',
+          languages = { 'typescript', 'vue' },
+        },
+      },
       preferences = {
         disableSuggestions = true,
         importModuleSpecifierPreference = 'non-relative',
       },
     },
+    filetypes = { 'javascript', 'typescript', 'vue' },
     settings = {
       completions = {
         completeFunctionCalls = true,

Mainly, should we once again disable tsserver for Vue projects and enable hybridMode in Volar?

[nevenduranec]

How does volar resolve alises in jsconfig.json? On version < 2 it works but on latest v2 it's not working (monorepo, the jsconfig.js is not in the project top level root) (neovim 0.9.5).
Edit:
Goto definition and lsp references don't work as well (gd when the cursor is on the workd axios for example import axios from 'axios').

Are you using auto import and vue component from unplugin?

No, it's a plain old vue 2 project, no typescript at all.

[wcheek]

There is some official documentation for what config is necessary for fixing this issue. Seems like the volar team didn't give their community dependents much of a heads-up...

TLDR. I've added this to my init.lua and solved the issue for "@vue/language-server": "^2.0.7"

local lspconfig = require("lspconfig")

-- Allows volar to run embedded tsserver
lspconfig.volar.setup({
    filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  init_options = {
    vue = {
      hybridMode = false,
    },
  },
})

Edit: Actually, this gave me some LSP capabilities but not all.

I found another suggested config in nvim-lspconfig documentation that seems to be working. You will have to install @vue/typescript-plugin globally and edit the location for your case.

-- init.lua
local lspconfig = require("lspconfig")

lspconfig.volar.setup({})
lspconfig.tsserver.setup({
  init_options = {
    plugins = {
      {
        name = "@vue/typescript-plugin",
        location = "C:\\Users\\wcheek\\AppData\\Roaming\\npm\\node_modules\\@vue\\typescript-plugin\\",
        languages = { "javascript", "typescript", "vue" },
      },
    },
  },
  filetypes = {
    "javascript",
    "typescript",
    "vue",
  },
})

[Jtcruthers]

I have a bunch of projects with both Vue2 and Vue3 and got the default tsserver working well with Mason and Neoconf. I installed tsserver, volar, and vuels (vetur) with Mason.

In all of my Vue2 projects, I disable both tsserver and volar via the local .neoconf.json:

{
  "lspconfig": {
    "tsserver": false,
    "volar": false
  }
}

Then in all of my Vue3 projects, I disable vuels and set a boolean to add the plugin in my local .neoconf.json:

{
  "is-volar-project": true,
  "lspconfig": {
    "vuels": false
  }
}

I globally install the latest @vue/typescript-plugin.

Then in my neovim lua config, I use mason-lspconfig to config tsserver with the plugin:

require("mason-lspconfig").setup_handlers {
  function(server_name)
    require("lspconfig")[server_name].setup {
      capabilities = lsp_capabilities,
    }
  end,
   ["tsserver"] = function()
    local neoconf = require("neoconf")

    local init_options = {}
    if neoconf.get("is-volar-project") then
      init_options = {
        plugins = {
          {
            name = "@vue/typescript-plugin",
            location = "/path/to/global/node_modules/@vue/typescript-plugin",
            languages = {"javascript", "typescript", "vue"},
          },
        },
      }
    end

    require("lspconfig").tsserver.setup {
      filetypes = { "vue", "javascript", "javascriptreact", "javascript.jsx", "typescript", "typescriptreact", "typescript.tsx" },
      compilerOptions = {
        noErrorTruncate = true
      },
      init_options = init_options,
    }
  end
}

This is working well for me. Vue2 projects use the vuels lsp, Vue3 projects use volar and tsserver with the @vue/typescript-plugin, and non-Vue ts projects do not import the vue plugin. Only callout is the global installation of the plugin's version has to match the version of volar installed via Mason.

[Jarmos-san]

I'm not a major fan of polluting and bloating my hard disk and hence did not want to resort to installing neither typescript nor the plugin @vue/typescript-plugin globally! Yeah I know HDD space is cheap and all but its just my personal preference and that's how I like my development environment to be.

Any way, looks like the Vue projects requires both typescript and @vue/typescript-plugin installed (which btw should already be installed as dev dependencies). And as long as you follow the instructions in the README it should work flawlessly. For further reference here are the Neovim configurations I use for my Vue projects and the screenshots of one such project I'm currently working on.

I'm pretty sure there might be some caveats to the way I've configure Neovim (for now) but I couldn't find time to investigate further. Regardless, I guess as long as it works as I expect it to I will keep procrastinating! 😆

[k0mpreni]

Did it still fully work?
I still don't get full lsp, mostly missing the types on components and error for missing required components.
For the types it always takes the shims on a project.
I checked and it's working on vscode (I know it can mean anything) on this project and working with brand new vue project.
This is why I'm confused.

Here is my config: https://github.com/k0mpreni/nvim-lua/blob/7c130638d2f2d55f7dfd6bf3ebbbb154853481fb/after/plugin/lsp.lua#L18

Using mason:
typescript-language-server 4.3.3
vue-language-server 2.0.13

I tried the readme config and the setup from catgoose, without success.

edit: added plugin versions

[Jarmos-san]

@k0mpreni try adding these lines to your Neovim config:

lspconfig.volar.setup({
   filetypes = {'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue', 'json'},
   init_options = {
       vue = {
          hybridMode = false
       },
   }
})

It is based on the recommended configurations which you would find in the README (see my previous comment for source).

[k0mpreni]

Tried it as well @Jarmos-san , unfortunately same result, the type definition are from the shims and not from the component itself.

[RayGuo-ergou]

Is this what are you referring to?

mostly missing the types on components and error for missing required components

One thing i can think of is: are the files included in tsconfig.json?

btw if you want to set hybridMode = false you should remove vue from tsserver, otherwise you will have 2 typescript server running at same time.

[k0mpreni]

Is this what are you referring to?

Exactly to those. It also seems that you have the shims as types no?
Component types are mostly useful for me as I want to have errors when I'm missing a required prop and if possible the props completion. Is it working for you @RayGuo-ergou ?

One thing i can think of is: are the files included in tsconfig.json?

Yes, it's in the tsconfig.json indeed. I also have it working in vscode with hybridMode on (had to put a specific tsdk as my project is not using typescript v5 yet).

[RayGuo-ergou]

Component types are mostly useful for me as I want to have errors when I'm missing a required prop and if possible the props completion. Is it working for you

Yes they are working for me.

defineProps({
  msg: {
    type: String,
    required: true,
  },
})

had to put a specific tsdk as my project is not using typescript v5 yet

This might be the reason, the tsdk running on LSP does nothing to your project, as a LSP is just a stand along server maybe give typescript: "^5" a try.

[RayGuo-ergou]

btw have not used vscode for ages but it seems give the same shim type.

[k0mpreni]

Ok so it seems that it's just a ts version issue.
Strange however that in vscode when I explicitly say volar to use typescript v5 it's working, but not with the nvim config.
Best would be to update my project to ts v5 anyway.
Thanks!

[RayGuo-ergou]

If you are using hybrid mode, the option tsdk in tsserver does not exit. If you want to declare the typescirpt path you should use tsserver.path.

see: https://github.com/typescript-language-server/typescript-language-server/blob/b224b878652438bcdd639137a6b1d1a6630129e4/docs/configuration.md?plain=1#L11

https://github.com/typescript-language-server/typescript-language-server/blob/b224b878652438bcdd639137a6b1d1a6630129e4/docs/configuration.md?plain=1#L41

[k0mpreni]

Ok so this is also doing the trick meanwhile I upgrade my project to v5. Can ditch vscode again thanks a lot!

For future reference:
If your project is not using a compatible version of TS with volar
Here is my config: https://github.com/k0mpreni/nvim-lua/blob/5948d7c8346f23863da68019929775b63321328c/after/plugin/lsp.lua#L17

If it's compatible, you don't need to override tsserver.path

[ulises-castro]

Context: This is a Vue 3 project without typescript.

This worked for me:

Notice I'm using some custom on_attach with Lspsaga.

-- Using Lspsaga If you like to ignore this, comment `on_attach = on_attach` 
local on_attach = function(client, bufnr)
  local opts = { noremap = true, silent = true, buffer = bufnr }
  keymap.set("n", "<leader>rn", "<cmd>Lspsaga rename<CR>", opts) -- smart rename
  vim.keymap.set("n", "K", "<cmd>Lspsaga hover_doc")
end


-- No need to set `hybridMode` to `true` as it's the default value
lspconfig.volar.setup({
  on_attach = on_attach,
  filetypes = { "typescript", "javascript", "javascriptreact", "typescriptreact", "vue" },
  init_options = {
    vue = {
      hybridMode = false,
    },
  },
})

[suinming]

I am using vetur for vue2 project and volar for vue3 project. Using a simple function to detect the vue version.

config = function()
	local capabilities = require("mini.completion").completefunc_lsp()
	local lspconfig = require("lspconfig")
	local util = require("lspconfig.util")
	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"
	-- js, ts
	lspconfig.ts_ls.setup({
		init_options = {
			plugins = {
				{
					name = "@vue/typescript-plugin",
					location = vue_language_server_path,
					languages = { "vue" },
				},
			},
		},
		filetypes = { "typescript", "javascript", "javascriptreact", "typescriptreact", "vue" },
	})
	-- vue
	local function get_vue_version()
		local root_dir = util.find_git_ancestor(vim.fn.getcwd()) or vim.fn.getcwd()
		local package_json = root_dir .. "/package.json"

		if vim.fn.filereadable(package_json) == 1 then
			local package_data = vim.fn.json_decode(vim.fn.readfile(package_json))
			local vue_version = package_data["dependencies"] and package_data["dependencies"]["vue"]
				or package_data["devDependencies"] and package_data["devDependencies"]["vue"]

			if vue_version then
				-- Strip any non-numeric characters like ^ or ~ from the version string
				local cleaned_version = vim.fn.matchstr(vue_version, [[\v\d+]])
				local version = tonumber(cleaned_version)
				return version
			end
		end
		return nil
	end

	local vue_version = get_vue_version()

	if vue_version == 3 then
		-- use volar for vue 3
		lspconfig.volar.setup({
			capabilities = capabilities,
		})
	else
		-- use vetur (vuels) for vue 2
		lspconfig.vuels.setup({
			capabilities = capabilities,
			filetypes = { "vue" },
			root_dir = lspconfig.util.root_pattern("package.json", ".git"),
		})
	end
end,

[PixsaOJ]

Volar is not able to run and have all capabilities no matter what. Use "typescript-tools" and @vue/typescript-plugin might take up resources, but its working.