Vue LSP(Volar 2.0) in neovim doesn't work for script section

Question

I recently start working on vue3 framework. As a neovim(neovim 10.0) user I wanted to integrate lsp server in my workflow. I finally wrote the the config like this.

local lspconfig = require "lspconfig"
local mason = require "mason"
local mason_lspconfig = require "mason-lspconfig"
local mason_registry = require "mason-registry"

mason.setup {}
mason_lspconfig.setup {
    ensure_installed = {
        "ts_ls",
        "volar",
    },
    handler = {
        function(server)
            lspconfig[server].setup {}
        end,
        volar = function()
            lspconfig.volar.setup {}
        end,
        ts_ls = function()
            local vue_typescript_server_path = mason_registry.get_package("vue-language-server"):get_install_path()
                .. "/node_modules/@vue/language-server"

            lspconfig.ts_ls.setup {
                init_options = {
                    plugins = {
                        {
                            name = "@vue/typescript-plugin",
                            location = vue_typescript_server_path,
                            languages = { "vue", "javascript", "typescript" },
                        },
                    },
                },
                filetypes = {
                    "javascript",
                    "javascript.jsx",
                    "javascriptreact",
                    "typescript",
                    "typescript.tsx",
                    "typescriptreact",
                    "vue",
                },
            }
        end,
    },
}

local servers = {
    "cssls",
    "html",
    "jsonls",
    "marksman",
    "ts_ls", -- typescript-language-server
    "volar", -- vue-language-server
}

for _, lsp in ipairs(servers) do
    local config = {
        on_attach = on_attach,
        on_init = on_init,
        capabilities = capabilities,
    }

    lspconfig[lsp].setup(config)
end

This does work perfectly in the template section and style section, with completion, suggestions, and all the nice things. But in the script section the lsp is inactive. And I also don't have preview of imported child-templates when I use them in the parent-template.

// inside this section am on my own
<script setup lang="ts">
import { ref } from "vue"
import { RouterView } from "vue-router" // don't have preview for RouterView token

let something = ref("data")
</script>

One thing I also noticed in the main.ts file is there is an error from my lsp when I import the the main-vue-template, but it does compile and launch the app.

import { createApp } from 'vue';
import App from './App.vue'; // Cannot find module './App.vue' or its corresponding type declarations.
const app = createApp(App);

• I expect the lsp to work in the script section.
• I want to have preview for imported templates.

Answer 1

I had a similar problem with my config. My solution was to pass the path of the @vue/typescript-plugin to the location field according to lspconfig. If you are using mason, it is deeply nested in its packages directory.

local vue_typescript_plugin_path = vim.fn.stdpath('data')
      .. '/mason/packages/vue-language-server/node_modules/@vue/language-server/node_modules/@vue/typescript-plugin'

ts_ls = {
        init_options = {
          plugins = {
            {
              name = '@vue/typescript-plugin',
              location = vue_typescript_plugin_path,
              languages = { 'vue' },
            },
          },
        },
        filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
        single_file_support = false,
      },