Narrow eglot's area-of-effect in Vue.js file using web-mode?

Question

I'd like to use eglot and web-mode to edit some Vue.js single file components. These files have top level <template> and <script> sections, with the former containing HTML.

The Eglot syntaxt checking and completion is very confused by this. Is there a way to tell web-mode that I only want to have eglot enabled when I'm inside the <script> part of the file?

Answer 1

I ended up solving this by taking a different approach: using vls and making a new major mode, derived from web-mode, to manage the association between Vue files and Eglot.

Wrote it up as a blog post with the details, but TL;DR:

(require 'eglot)
(require 'web-mode)
(define-derived-mode genehack-vue-mode web-mode "ghVue"
  "A major mode derived from web-mode, for editing .vue files with LSP support.")
(add-to-list 'auto-mode-alist '("\\.vue\\'" . genehack-vue-mode))
(add-hook 'genehack-vue-mode-hook #'eglot-ensure)
(add-to-list 'eglot-server-programs '(genehack-vue-mode "vls"))

And then install vls with npm install -g vls.