vue-mode

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

Preview

Install

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

Spacemacs

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
  '(vue-mode))

(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
               :config
               ;; 0, 1, or 2, representing (respectively) none, low, and high coloring
               (setq mmm-submode-decoration-level 0)))

Q&A

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