vim-vue
Vim syntax highlighting for Vue components.
This was initially forked from darthmall/vim-vue. I already have an implementation for this but found his code much cleaner. That's why I created a new version instead of a PR.
Installation
Vundle
Install withPlugin 'posva/vim-vue'
Pathogen
Install withcd ~/.vim/bundle && \git clone https://github.com/posva/vim-vue.git
Install without a plugin manager (Vim 8)
git clone https://github.com/posva/vim-vue.git ~/.vim/pack/plugins/start/vim-vue
Syntastic or ALE
Integration withCurrently only eslint
is available. Please make sure
eslint and
eslint-plugin-vue are installed:
npm i -g eslint eslint-plugin-vue
Contributing
If your language is not getting highlighted open an issue or a PR with the fix.
You only need to add a line to the syntax/vue.vim
file.
FAQ
Where is Jade?
Jade has been renamed to pug.
Therefore you have to replace all your jade
occurrences with pug
. The new
plugin for pug
can be found on the same repository
(the name has already been updated).
Typescript support
You can use typescript by adding one of the following attributes/values to your component's script tag:
Choose one that works with your module bundler
My syntax highlighting stops working randomly
This is because Vim tries to highlight text in an efficient way. Especially in
files that include multiple languages, it can get confused. To work around
this, you can run :syntax sync fromstart
when it happens.
You can also setup an autocmd for this:
autocmd FileType vue syntax sync fromstart
See :h :syn-sync-first
and this article
for more details.
How can I use existing configuration/plugins in Vue files?
If you already have some configuration for filetypes like html, css and javascript (e.g. linters, completion), you can use them in .vue files by setting compound filetypes like this:
autocmd BufRead,BufNewFile *.vue setlocal filetype=vue.html.javascript.css
⚠️ This may cause problems, because some plugins will then treat the whole buffer as html/javascript/css instead of only the part inside the tags.
How can I use NERDCommenter in Vue files?
To use NERDCommenter with Vue files, you can use its "hooks" feature to temporarily change the filetype. Click for an example.
let g:ft = ''function! NERDCommenter_before() if &ft == 'vue' let g:ft = 'vue' let stack = synstack(line('.'), col('.')) if len(stack) > 0 let syn = synIDattr((stack)[0], 'name') if len(syn) > 0 exe 'setf ' . substitute(tolower(syn), '^vue_', '', '') endif endif endifendfunctionfunction! NERDCommenter_after() if g:ft == 'vue' setf vue let g:ft = '' endifendfunction
Vim gets slows down when using this plugin How can I fix that?
Add let g:vue_disable_pre_processors=1
in your .vimrc to disable checking for prepocessors. When checking for prepocessor languages, multiple syntax highlighting checks are done, which can slow down vim. This variable prevents vim-vue from supporting every prepocessor language highlighting.