Awesome
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.
[!WARNING] This project is currently not actively maintained. We recommend to check the official vuejs/language-tools instead.
Installation
Install with Vundle
Plugin 'posva/vim-vue'
Install with Pathogen
cd ~/.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
Integration with Syntastic or ALE
Currently only eslint
is available. Please make sure
eslint and
eslint-plugin-vue are installed
and properly configured:
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.
Don't forget to write Vader tests for
the code you write. You can run the tests by executing make test
in the
terminal.
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).
How to use commenting functionality with multiple languages in Vue files?
tcomment
tcomment has some support for Vue files with multiple languages, without any extra configuration.
caw.vim
caw.vim features built-in support for file context through context_filetype.vim. Just install both plugins and context-aware commenting will work in most files. The fenced code is detected by predefined regular expressions.
NERDCommenter
<details> <summary> To use NERDCommenter with Vue files, you can use its "hooks" feature to temporarily change the filetype. <em>Click for an example.</em> </summary>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
endif
endfunction
function! NERDCommenter_after()
if g:ft == 'vue'
setf vue
let g:ft = ''
endif
endfunction
</details>
Vim slows down when using this plugin How can I fix that?
When checking for pre-processor languages, multiple syntax highlighting checks are done, which can slow down vim. You can trim down which pre-processors to use by setting g:vue_pre_processors
to a whitelist of languages to support:
let g:vue_pre_processors = ['pug', 'scss']
To disable pre-processor languages altogether (only highlight HTML, JavaScript, and CSS):
let g:vue_pre_processors = []
Available pre-processors are: coffee, haml, handlebars, less, pug, sass, scss, slm, stylus, typescript
When g:vue_pre_processors
is set to 'detect_on_enter' instead of a list, vim-vue will detect the pre-processors used when a file is opened, and load only their syntax files.
let g:vue_pre_processors = 'detect_on_enter'