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.

One final thing to note is if you create an empty vue file and start typing in scaffold , you can autocomplete a snippet and it’ll make the vue file for you!