nvim-typescriptを使用する方法ではできなかったので出来るように頑張りました。

(他に代替出来る方法を教えていただいたの最後の方で紹介します。)

Vueファイル内で、html, typescript, cssの補完が良い感じに効くようになりました。

やり方

deoplete.vimとcontext_filetype.vim、nvim-typescriptを使用します。

dein.vimでプラグイン管理をする場合の最小構成は以下です。

if &compatible
  set nocompatible
endif
set runtimepath+=~/.vim/bundle/repos/github.com/Shougo/dein.vim

if dein#load_state('~/.vim/bundle')
  call dein#begin('~/.vim/bundle')

  call dein#add('Shougo/dein.vim')
  call dein#add('posva/vim-vue')
  call dein#add('Shougo/context_filetype.vim')
  "call dein#add('osyo-manga/vim-precious')
  call dein#add('Shougo/deoplete.nvim', {
  \ 'hook_add': 'let g:deoplete#enable_at_startup = 1'
  \ })
  call dein#add('mhartington/nvim-typescript', {
  \ 'hook_add': 'let g:nvim_typescript#vue_support = 1'
  \ })

  call dein#end()
  call dein#save_state()
endif

filetype plugin indent on
syntax enable

nvim-typescriptを使うにはまだ"npm i -g typescript"する必要があるのでそこは注意です。

やったこと

context_filetype.vimとnvim_typescriptをVue対応させました。

embed.ly

embed.ly

あとはdeoplete.nvim本体もShougoさんに修正した頂きました。

embed.ly

PRとかIssue出してから反映されるのが素早くて素晴らしかったです、感謝です。

他の方法

色々画策しているうちに、この方法以外にもVimでVue + TypeScriptする方法はあると教えていただきました。

embed.ly

LanguageClientを使う方法です、Vue.jsの公式にLanguageServerProtcolの実装があるとは知らなかったのでびっくりでした。

VeturはVue公式なのでVueに特化した補完が聞きそうなのでこちらのほうが便利かも？

embed.ly

これはtuquyomiを使う方法です、Vimでも動きそうなのでNeovimが使えない環境ではこちらが良さそう。