I recently picked up vue.js for my frontend work, and with that I need to edit it. As always I fell back to my trusty favourite editor Emacs. A quick google search found vue-mode, but it wasn’t enough for me. I saw people editing vue seamlessly inside of Atom or VS Code — I wanted more.

Then I found out about language server protocol, and did some more research. There was an official language server called vetur, which is what I used, and here’s how to set it up. Keep in mind, this may be different for vanilla Emacs users, as I’m a spacemacs user.

First, you gotta install the required program.

$ npm install -g vue-language-server

Then, you gotta install the required modes. Inside your config find this line

dotspacemacs-additional-packages '()

and change it to

dotspacemacs-additional-packages '(vue-mode

lsp-mode

lsp-vue

company-lsp)

and then restart emacs.

Now, we have to add a tiny bit more config and then we can get going. Head down to your dotspacemacs/user-config and add

(require 'vue-mode)

(add-to-list 'vue-mode-hook #'smartparens-mode) (require 'lsp-mode)

(require 'lsp-vue)

(add-hook 'vue-mode-hook #'lsp-vue-mmm-enable)

(with-eval-after-load 'lsp-mode

(require 'lsp-flycheck)) (require 'company-lsp)

(push 'company-lsp company-backends)

The first bit, adding smartparens-mode to vue-mode is just a QOL thing. You want your parentheses to insert a closing one, right?

After that is adding in the language server protocol mode, running whenever you head into a .vue file as well as the flychecking.

Finally, the company require enables snippets (with yasnippet) and completion.