how to activate web-mode for template

[kermorgant]

Hi,

I've read that mixing web-mode with vue-mode brings unsolved issues, but I've been using web-mode so much (and still continues on non vue projects) that using something different is painful.

So I thought I'd nevertheless try to mix them and see if the benefits of vue-mode would outweight the cons of the issues.

I tried to activate web-mode using this configuration

(use-package vue-mode
  :config
  (add-to-list 'vue-modes '(:type template :name nil :mode web-mode))
  (add-to-list 'vue-modes '(:type template :name html :mode web-mode)))

in a .vue SFC file, I then have vue-modes' value being

vue-modes is a variable defined in vue-mode.el.

Value
((:type template :name html :mode web-mode)
 (:type template :name nil :mode web-mode)
 (:type template :name nil :mode vue-html-mode)
 (:type template :name html :mode vue-html-mode)
 (:type template :name jade :mode jade-mode)
...

According to this SE answer, I understand the elements I've added at the top of the list would override the default ones.

But when opening a .vue file, the active mode inside a <template> section is

vue[vue-html] mode defined in ‘vue-html-mode.el’:
Major mode for Vue.js templates.

Any idea of what is wrong here ?

[AdamNiederer]

You're close, but the data structure of vue-modes is a list of plists, rather than an alist. I use every value in that list, so there's no way to "override" a value in that list without changing it.

vue-mode provides a graphical interface to change its customized variables. After vue-mode is loaded, type M-x customize, search for vue, and expand Vue Modes. You can then modify the "Submode to activate" field for each language, and add/remove language->mode mappings from that interface.

Alternatively, you can redefine vue-modes in your init.el. Your config was close; just remove the two entries with vue-html-mode

(:type template :name html :mode web-mode)
(:type template :name nil :mode web-mode)
(:type template :name nil :mode vue-html-mode) ; remove
(:type template :name html :mode vue-html-mode) ; these

Although you addressed this in your initial report, I'd like to reiterate that using web-mode as a submode in vue-mode will break a lot of stuff. Unfortunately, I can't provide fixes for any issues that may crop up as a result of using that combination.

[kermorgant]

Thanks for your answer.

Well, I tried to redefine vue`modes by removing the two entries I was trying to override, but looking at which modes are activated in the <template> part, (using C-h m), I got

Enabled minor modes: Async-Bytecomp-Package Auto-Compile-On-Load
Auto-Composition Auto-Compression Auto-Encryption Auto-Revert
Blink-Cursor Company Company-Prescient Diff-Auto-Refine
Eldoc-In-Minibuffer Electric-Indent Evil Evil-Local Evil-Smartparens
Evil-Surround Eyebrowse File-Name-Shadow Flycheck Font-Lock
General-Override Global-Company Global-Eldoc Global-Evil-Surround
Global-Flycheck Global-Font-Lock Global-Git-Commit Global-Hl-Line
Global-Magit-File Global-Subword Global-Undo-Tree Global-Wakatime Ivy
Ivy-Prescient Line-Number Magit-Auto-Revert Magit-File Magit-Todos Mmm
Mouse-Wheel Override-Global Persp Persp-Mode-Projectile-Bridge
Prescient-Persist Projectile Recentf Save-Place Shell-Dirtrack
Show-Paren Smartparens Smartparens-Global Subword Transient-Mark
Undo-Tree Wakatime Which-Key Winner

(Information about these minor modes follows the major mode info.)

vue mode defined in ‘vue-mode.el’:
Major mode derived from ‘html-mode’ by ‘define-derived-mode’.
It inherits all of the parent’s attributes, but has its own keymap,
abbrev table and syntax table:

  ‘vue-mode-map’, ‘vue-mode-abbrev-table’ and ‘vue-mode-syntax-table’

which more-or-less shadow html-mode’s corresponding tables.

Not what I expected, but maybe one of the first issues trying to use web-mode as a sub-mode...