BlogProjectsAbout

Configuring Vue with Neovim, lsp-config, and Mason.nvim

2024-09-12

Setting up Vue language support in Neovim using lsp-config and Mason.nvim for an efficient TypeScript and Vue development environment.

# ⚡ Volar 2.0.0 and Beyond: What's Changed?

With the release of Volar 2.0.0, TypeScript support has changed significantly. The previous "Take Over" mode has been deprecated and replaced with the new "Hybrid" mode. In this mode, the Vue Language Server (@vue/language-server) manages only the CSS/HTML sections, while TypeScript support is provided by running a TypeScript server with the @vue/typescript-plugin.

## 🚀 Setting Up Volar for TypeScript Support

In this guide, we will configure ts_ls (aka typescript-language-server) to work alongside Vue. It's important to note that ts_ls is a Language Server Protocol (LSP) implementation for TypeScript that wraps tsserver.

>

Note: ts_ls is not the same as tsserver.

### ⚠️ Important:

Make sure both @vue/typescript-plugin and volar are on the same version to ensure compatibility.

  1. Set the Path to @vue/language-server:

First, let's use Mason to get the path to the Vue language server. Here's how you can do it:

lua

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'

If you don't have Mason installed, you can manually provide the path:

lua

local vue_language_server_path = '/path/to/@vue/language-server'
  1. Load lspconfig:

Next, we load the lspconfig module, which is used to manage the configuration of language servers.

lua

local lspconfig = require('lspconfig')
  1. Configure the TypeScript Language Server:

Now, let's configure the TypeScript Language Server using lspconfig to add Vue support via the TypeScript plugin for Vue.

lua

lspconfig.ts_ls.setup {
    -- Initial options for the TypeScript language server
    init_options = {
        plugins = {
            {
                -- Name of the TypeScript plugin for Vue
                name = '@vue/typescript-plugin',

                -- Location of the Vue language server module (path defined in step 1)
                location = vue_language_server_path,

                -- Specify the languages the plugin applies to (in this case, Vue files)
                languages = { 'vue' },
            },
        },
    },

    -- Specify the file types that will trigger the TypeScript language server
    filetypes = {
        'typescript',          -- TypeScript files (.ts)
        'javascript',          -- JavaScript files (.js)
        'javascriptreact',     -- React files with JavaScript (.jsx)
        'typescriptreact',     -- React files with TypeScript (.tsx)
        'vue'                  -- Vue.js single-file components (.vue)
    },
}

### 📋 Complete Code

Here’s the full setup combining all the previous steps:

nvim/../nvim-lspconfig.lua

['ts_ls'] = function ()
    -- 1. Import Mason Registry
    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'

    -- 2. Import lspconfig
    local lspconfig = require('lspconfig')

    -- 3. Configure ts_ls for TypeScript and Vue
    lspconfig.ts_ls.setup {
        init_options = {
            plugins = {
                {
                    name = '@vue/typescript-plugin',
                    location = vue_language_server_path,
                    languages = { 'vue' },
                },
            },
        },
        filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
    }
end,

## 🎉 Conclusion

With this setup, you can easily integrate TypeScript and Vue support in Neovim, allowing you to work seamlessly with .ts, .js, and .vue files in one environment. The TypeScript plugin for Vue ensures that autocompletion, error checking, and other essential LSP features work as expected. You’re now ready for a smoother, more efficient workflow in TypeScript and Vue projects!

Go ahead and adjust the configuration to fit your specific needs!

All posts

kosu.me 🐧 - 2024