Skip to content


Folders and files

Last commit message
Last commit date

Latest commit


Repository files navigation MELPA Melpa Stable Status Build Status codecov


Emacs major mode for vue.js based on mmm-mode.


2016-04-10 10 44 46


Emacs users may install the package from MELPA. vue-mode should then be activated on all files with a .vue extension.


There are two ways to install and configure vue-mode when using spacemacs.

The Simple Way, Without a Layer

Spacemacs allows the installation of additional packages outside of its layer system using the dotspacemacs-additional-packages variable. Add vue-mode to this list.

Edit your ~/.spacemacs file as follows (to find it press SPC f e d):

dotspacemacs-additional-packages '(vue-mode)

With a Layer

Creating a layer is a more complicated method of installing the package, but it allows for greater flexibility, and faster started via autoloading. You can read more about it here: Spacemacs Layers.

The following is a minimal package.el file for a custom vue-mode layer:

(setq vue-mode-packages

(setq vue-mode-excluded-packages '())

(defun vue-mode/init-vue-mode ()
  "Initialize my package"
  (use-package vue-mode))

If you want to customize the region background color (default is highlight):

(defun vue-mode/init-vue-mode ()
  (use-package vue-mode
               ;; 0, 1, or 2, representing (respectively) none, low, and high coloring
               (setq mmm-submode-decoration-level 0)))


Why js-mode instead of js2-mode?

js2-mode does not yet work with "multi-mode" modes such as mmm-mode. See mooz/js2-mode#124.

How can I reload the submodes in a buffer?

Try M-x vue-mode-reparse.

How do I disable that ugly background color?

Customize mmm-default-submode-face. It's an mmm-mode default.

Add the following lines to your .emacs.d/init.el to set a lighter color:

(add-hook 'mmm-mode-hook
          (lambda ()
            (set-face-background 'mmm-default-submode-face "#fafafa")))

Or disable the background color completely in your .emacs.d/init.el:

(add-hook 'mmm-mode-hook
          (lambda ()
            (set-face-background 'mmm-default-submode-face nil)))