vue-mode-polymode.el

(use-package polymode
        :ensure t
        :defer t
        :hook (vue-mode . lsp-deferred)
        :mode ("\\.vue\\'" . vue-mode)
        :config
        (define-innermode poly-vue-template-innermode
          :mode 'html-mode
          :head-matcher "^<[[:space:]]*\\(?:template\\)[[:space:]]*>"
          :tail-matcher "^</[[:space:]]*\\(?:template\\)[[:space:]]*>"
          :head-mode 'host
          :tail-mode 'host)

        (define-innermode poly-vue-script-innermode
          :mode 'js-mode
          :head-matcher "<[[:space:]]*\\(?:script\\)[[:space:]]*>"
          :tail-matcher "</[[:space:]]*\\(?:script\\)[[:space:]]*>"
          :head-mode 'host
          :tail-mode 'host)

        (define-auto-innermode poly-vue-template-tag-lang-innermode
          :head-matcher "^<[[:space:]]*\\(?:template\\)[[:space:]]*lang=[[:space:]]*[\"'][[:space:]]*[[:alpha:]]+[[:space:]]*[\"'][[:space:]]*>"
          :tail-matcher "^</[[:space:]]*\\(?:template\\)[[:space:]]*>"
          :mode-matcher (cons  "^<[[:space:]]*\\(?:template\\)[[:space:]]*lang=[[:space:]]*[\"'][[:space:]]*\\([[:alpha:]]+\\)[[:space:]]*[\"'][[:space:]]*>" 1)
          :head-mode 'host
          :tail-mode 'host)

        (define-auto-innermode poly-vue-script-tag-lang-innermode
          :head-matcher "<[[:space:]]*\\(?:script\\)[[:space:]]*lang=[[:space:]]*[\"'][[:space:]]*[[:alpha:]]+[[:space:]]*[\"'][[:space:]]*>"
          :tail-matcher "</[[:space:]]*\\(?:script\\)[[:space:]]*>"
          :mode-matcher (cons  "<[[:space:]]*\\(?:script\\)[[:space:]]*lang=[[:space:]]*[\"'][[:space:]]*\\([[:alpha:]]+\\)[[:space:]]*[\"'][[:space:]]*>" 1)
          :head-mode 'host
          :tail-mode 'host)

        (define-auto-innermode poly-vue-style-tag-lang-innermode
          :head-matcher "<[[:space:]]*\\(?:style\\)\\(?:scoped\\|[[:space:]]\\)*lang=[[:space:]]*[\"'][[:space:]]*[[:alpha:]]+[[:space:]]*[\"']*\\(?:scoped\\|[[:space:]]\\)*>"
          :tail-matcher "</[[:space:]]*\\(?:style\\)[[:space:]]*>"
          :mode-matcher (cons  "<[[:space:]]*\\(?:style\\)\\(?:scoped\\|[[:space:]]\\)*lang=[[:space:]]*[\"'][[:space:]]*\\([[:alpha:]]+\\)[[:space:]]*[\"']\\(?:scoped\\|[[:space:]]\\)*>" 1)
          :head-mode 'host
          :tail-mode 'host)

        (define-innermode poly-vue-style-innermode
          :mode 'css-mode
          :head-matcher "<[[:space:]]*\\(?:style\\)[[:space:]]*\\(?:scoped\\|[[:space:]]\\)*>"
          :tail-matcher "</[[:space:]]*\\(?:style\\)[[:space:]]*>"
          :head-mode 'host
          :tail-mode 'host)

        (define-polymode vue-mode
          :hostmode 'poly-sgml-hostmode
          :innermodes '(
                        poly-vue-template-tag-lang-innermode
                        poly-vue-script-tag-lang-innermode
                        poly-vue-style-tag-lang-innermode
                        poly-vue-template-innermode
                        poly-vue-script-innermode
                        poly-vue-style-innermode
                        )))

@SjB In .vue files, the code in the tag is often indented by two (or whatever default indent you use). To get that indentation in the polymode too, when you auto-format or C-i, you can add

    :body-indent-offset '2

to the template innermodes.

At some point, I managed to install the css-ls language server. This server then autostarts in my vue files (since css-mode is used for the style sections). But css-ls doesn't manage to handle the vue file properly, and dumps various errors. I had to disable it with

;; I use scss-mode instead of css-mode for the style section
  (setq lsp-disabled-clients '((scss-mode . css-ls))) 

Have you had this issue, @SjB ?

I'm not having that issue, but I do understand why you would get it. I would set that variable in a dir/file local variable as it's very project specific. You could also set it on a vue-mode-hook and use setq-local instead.

does this config still work ?

• does it support lsp ?
  • typescript lsp ?
  • volar lsp ?
• what about eslint error check ?
• company autocompletions ?
• template block ?
  • error handle ?
  • components autocomplete and import ?

if it is not working . is there any replacement to develop vue apps with emacs ?