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?


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.