Demonstration and instructions

[Bee-Mar]

Can you please post a more full demonstration of what users should expect when this package is installed properly. I have attempted to use this several times, however based on the single image shown on the readme, I have absolutely no idea if the package is working as you intended. After installing the vue-language-server, I’m able to connect to it with lsp-mode, but again, do not know if what I’m experiencing is what is intended. Code completion/suggestion is extremely slow, and does not work well in general, so I’m giving this package the benefit of the doubt and assuming I’m leaving out a portion of the configuration.

Please, update the readme with a more clear demonstration of what users should expect after installation.

[stockersky]

Same here.
Note : I use stock Emacs.

It seems we're not alone : #90 #75

For example, while editing a Vue SPA file, I can see vue-mode seems to recognize if I'm in a template

or script block. Code is highlighted, but it shows no other feature (autocomplete, linting, etc...)

A little more documentation would be helpful !

[stockersky]

After giving vue-mode another try, I ended up with a working configuration with LSP autocompletion and linting.

1- get the vue language server
https://github.com/vuejs/vetur/tree/master/server
npm install vue-language-server -g

2- in emacs, install and configure LSP
https://github.com/emacs-lsp/lsp-mode

NOTE : you don't need lsp-vue anymore :
https://github.com/emacs-lsp-legacy/lsp-vue/issues/20

;; ----- vue-mode -----
(use-package vue-mode
  :ensure t
  :mode ("\\.vue\\'")
  :config
  ;; 0, 1, or 2, representing (respectively) none, low, and high coloring
  (setq mmm-submode-decoration-level 0)
)

;; usefull if emacs environment does not find the vls command :
;; (setq exec-path (append exec-path '("/PROJECTS/SOFTWARES/npm-global/bin")))

(use-package lsp-mode
  :ensure t
  :hook (vue-mode . lsp)
  :config (setq lsp-enable-snippet nil) ;; otherwise throw error
  :commands lsp)

;; optionally
;; (use-package lsp-ui :commands lsp-ui-mode)
(use-package company-lsp
  :ensure t
  :commands company-lsp)

This is basically the config snippets provided on the official links I provided with slight modifications (like ensure t that would automatically install the package at emacs startup.

LSP client will connect to the vue language server lib you install at step 1.
It needs to find the vls command. In the mini buffer, you might see message :
LSP :: Connected to [vls:<pid>]
If not, (setq exec-path (append exec-path '("/PROJECTS/SOFTWARES/npm-global/bin"))) might help emacs to find the path of vls.

There's lot of LSP tweaking and additional packages like lsp-ui and so on : https://emacs.nasy.moe/

[AdamNiederer]

Yup, autocompletion and other IDE features are handled by LSP. vue-mode just gives you syntax highlighting and indentation. The screenshot in the README was taken before LSP was available by the previous maintainer of this package, and I'm not sure what he used.

[azzamsa]

tried several hours, but can't get it working.

[azzamsa]

Turns out I've put wrong line (add-hook 'vue-mode-hook #'prettier-js). Everything works out-of the box after removing it.

I am using stock Emacs, and i've documented the steps here Setup Emacs for Vue.js Development