These are the steps that you need to setup Vue.js using Emacs.

#1: Setting up Emacs lsp-mode.

You just need to invoke M-x package-install then hit Enter then type lsp-mode.

Then add it to your emacs config:

(require 'lsp-mode)

Emacs lsp-mode support for Vue.js is built-in lsp-vetur.el. Whenever lsp-mode find a file that had vue extension, it will connect to vetur and provide everything for you.

#2: Installing Vue Language Server.

lsp-mode as client relies on vetur for those functionalities to works. So we need to install it:

npm install -g vue-language-server

#3: Setting up Vue-mode.

As the author, Ivan Yonchovski explains that lsp-mode still delegates some of the functionalities to language-specific projects such as syntax highlighting and indentations.

So to get those functionalities, we need vue-mode. Vue-mode switch the mode automatically for us on Vue.js single-file components. It will notifies you via mode-line such as vue[vue-html], vue[vue-CSS] and vue[Javascript].

You can install it using M-x package-install then hit Enter then type vue-mode. Then repeat the step for vue-html-mode if it is not installed automatically.

Complete Config Example.

(use-package lsp-mode
  :commands lsp)

;; for completions
(use-package company-lsp
  :after lsp-mode
  :config (push 'company-lsp company-backends))

(use-package vue-mode
  :mode "\\.vue\\'"
  :config
  (add-hook 'vue-mode-hook #'lsp))

To see my actual config, see my .emacs.d

Notes.

  1. Some people having difficulties setting up vue-mode. Fortunately for me it works out of the box. I am using: this vue-mode version or 20190415.231, mmm-mode-0.5.7, and GNU Emacs 26.1.
  2. I have tried several hours to make it work. No result. I am so close to decide to install another editor just for Vue development only. Turns out I have added the (add-hook 'vue-mode-hook #'prettier-js) line that breaks everything else unnoticed.
Comments

So what do you think ? Leave your comments below.


Published

Category

CS

Tags