Skip to content

Vue.js

Jump to bottom
Drew Daniels edited this page Nov 2, 2025 · 1 revision

Vue.js

  • Look into if it makes sense to package @vue/typescript-plugin into nixpkgs, so I do not always have to add this as a developer dependency to every vue project I work on.

Background on tsserver and LSP wrappers like typescript-language-server

Here is a good explanation of what the difference is between tsserver and typescript-language-server.

The TypeScript project/package includes a tsserver component which provides a custom API that can be used for gathering various intelligence about a typescript/javascript project. The VSCode team has built a project called Typescript Language Features (and bundled it as an internal extension in VSCode) that provides code intelligence for your javascript and typescript projects by utilizing that tsserver API. Since that extension doesn't use the standardized Language Server Protocol to communicate with the editor, other editors that implement LSP can't directly utilize it. Here is where the TypeScript Language Server project comes in with the aim to provide a thin LSP interface on top of that extension's code base for the benefit of all other editors that implement the LSP protocol.

In other words, tsserver is the non-standard language server, typescript-language-server is a wrapper that acts as a "middle-man" to translate requests from LSP clients into the format tsserver needs to process them, and returns responses to those clients in the LSP format they require.

typescript-tools.nvim is an alternative to typescript-language-server, but is not fully compatible for use with vue projects, so the only available wrappers of tsserver are ts_ls and vtsls.

How to use LSP features in vue projects

https://github.com/vuejs/language-tools/wiki/Neovim#configuration

Ensure that typescript-language-server and vue-language-server are installed.

Configure these language servers to use each other as plugins.

Install the @vue/typescript-plugin, which allows typescript-language-server and vue-language-server to communicate with each other so that:

  • typescript-language-server can understand what .vue files are
  • vue-language-server can understand what .ts(x) files are
npm i -D @vue/typescript-plugin

Clone this wiki locally