Skip to content
Emacs major mode for vue.js
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Allow arbitrary key ordering for opening tags Aug 27, 2018
.gitignore Add Caskfile Apr 1, 2017
.travis.yml Update .travis.yml May 16, 2018
Cask Use undercover May 16, 2018
LICENSE Initial commit Apr 10, 2016 More details for disabling background color Sep 27, 2018
vue-mode.el enable i18n tag support Apr 15, 2019 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

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)))
You can’t perform that action at this time.