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 ?

Another issue that might be of interest to someone. I use typescript for my vue project. So I use typescript-mode instead of js-mode. LSP is configured, and uses ts-ls. However, ts-ls will lock files, so yarn build fails. I have to kill the ts-ls workspace before building (lsp-workspace-shutdown)).

A third issue is that I get the error

ERROR: (sgml-syntax-propertize 2929 3166) -> Assertion failed: (>= (cadr sgml--syntax-propertize-ppss) 0)

especially in the style section. Have you @SjB or @tosiek88 seen this?

This seems related: dgutov/mmm-mode#99 , https://emacs.stackexchange.com/questions/53148/syntax-indentation-problems-with-vue-mode-in-emacs-27-nightly

A third issue is that I get the error

ERROR: (sgml-syntax-propertize 2929 3166) -> Assertion failed: (>= (cadr sgml--syntax-propertize-ppss) 0)

Did your solve this?

@Artawower Unfortunately not :-(. Still an issue. I saw you commented here AdamNiederer/vue-mode#109 (comment) about the mmm-variable fix, but I guess that wouldn't work here as polymode doesn't rely on multiple major modes (mmm). Nevertheless, it seems like something similar needs to get done with polymode for that issue to get fixed. It's a bit of a pain, because it seems to me that correct automatic indenting, automatic formatting, and various emacs modes (e.g. electric-pair-mode?) all break because of this.

Alternatively, I've been thinking about trying to set up web-mode with vue, since it might have better handling for edge cases like this. For now, I'm living with a few bugs.

@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 ?