🗂

LazyVimを使用してVueで入力補完を適用させる

2025/10/12に公開

はじめに

Vueの学習を行うためにLazyVimで環境構築を行っていたのですが、入力補完周りでの設定で詰まったのでメモとして残しておきます。

拡張機能のインストール

LazyVimを使用している方はMasonが導入されているため以下でインストールを行います。

:MasonInstall vue-language-server@2.2.0

ここでvue-language-serverについてはversionを2.2.0で指定してインストールを行ってください。
以下のissuesで報告されているのですが、version3以降でアーキテクチャ全体の変更があったことにより、後述の設定ファイルでは補完が効きません。

補足

上記でMasonの自動アップデートなどでバージョンが変更されてしまう恐れがあるので、固定のバージョンを使用するように下記の設定を行う方が安全です。
/lua/plugins/mason-tool-installer.lua

return {
  {
    "WhoIsSethDaniel/mason-tool-installer.nvim",
    opts = function(_, opts)
      opts.ensure_installed = opts.ensure_installed or {}
      vim.list_extend(opts.ensure_installed, {
        { "vue-language-server", version = "2.2.0" },
        -- ほかに固定したい LSP やフォーマッタがあればここへ追加
      })
    end,
  },
}

設定ファイルの追加

LazyVimの設定ファイルを追加します。
lua/plugins/vue.lua

return {
  {
    "neovim/nvim-lspconfig",
    opts = {
      setup = {
        tsserver = function(_, opts)
          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"

          opts.init_options = {
            plugins = {
              {
                name = "@vue/typescript-plugin",
                location = vue_language_server_path,
                languages = { "vue" },
              },
            },
          }
          opts.filetypes = { "typescript", "javascript", "javascriptreact", "typescriptreact", "vue" }
        end,
      },
      servers = {
        tsserver = {},
      },
    },
  },
}

引用元

こちらの設定ファイルを参考にしました。
これでVueのファイルでも入力保管が適用されるようになりました。

はじめに

拡張機能のインストール

補足

設定ファイルの追加

引用元

Discussion