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
                        )))

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 ?