Vim syntax and indent plugin for .vue
files. Mainly inspired by mxw/vim-jsx.
-
Use VundleVim
Plugin 'leafOfTree/vim-vue-plugin'
-
Use vim-pathogen
cd ~/.vim/bundle && \ git clone https://github.com/leafOfTree/vim-vue-plugin --depth 1
-
Use vim-plug
Plug 'leafOfTree/vim-vue-plugin' :PlugInstall
-
Or manually, clone this plugin, drop it in custom
path/to/this_plugin
, and add it tortp
in vimrcset rpt+=path/to/this_plugin
The plugin works if filetype
is set to vue
. Please stay up to date. Feel free to open an issue or a pull request.
Since .vue
is a combination of CSS, HTML and JavaScript, so is vim-vue-plugin
. (Like XML and JavaScript for .jsx
).
Supports
- Vue directives.
- Pug with vim-pug (see Configuration).
- Less/Sass/Scss (see Configuration).
- Coffee with vim-coffee-script (see Configuration).
- A builtin
expr
foldmethod (see Configuration). - emmet-vim HTML/CSS/JavaScript filetype detection.
.wpy
files from WePY.
Set global variable to 1
to enable or 0
to disable.
Ex:
let g:vim_vue_plugin_load_full_syntax = 1
variable | description | default |
---|---|---|
g:vim_vue_plugin_load_full_syntax * |
Enable: load all syntax files in runtimepath to enable related syntax plugins.Disable: only in $VIMRUNTIME/syntax , ~/.vim/syntax and $VIM/vimfiles/syntax |
0 |
g:vim_vue_plugin_use_pug * |
Enable vim-pug pug syntax for <template lang="pug"> . |
0 |
g:vim_vue_plugin_use_coffee |
Enable coffee syntax for <script lang="coffee"> . |
0 |
g:vim_vue_plugin_use_less |
Enable less syntax for <style lang="less"> . |
0 |
g:vim_vue_plugin_use_sass |
Enable scss syntax for <style lang="scss"> (or sass fo lang="sass"). |
0 |
g:vim_vue_plugin_has_init_indent |
Initially indent one tab inside style/script tags. |
0 for .vue . 1 for .wpy |
g:vim_vue_plugin_highlight_vue_attr |
Highlight vue attribute value as expression instead of string. | 0 |
g:vim_vue_plugin_use_foldexpr |
Enable foldexpr fold method. |
0 |
g:vim_vue_plugin_debug |
Echo debug messages in messages list. Useful to debug if unexpected indents occur. |
0 |
*: Vim may be slow if the feature is enabled. Find a balance between syntax highlight and speed. By the way, custom syntax could be added in ~/.vim/syntax
or $VIM/vimfiles/syntax
.
Note
filetype
used to be set tojavascript.vue
, which causedjavascript
syntax to be loaded multiple times and a significant delay. Now it isvue
so autocmds and other settings forjavascript
have to be manually enabled forvue
.g:vim_vue_plugin_use_foldexpr
default value used to be1
. But there are other foldmethod choices, so it's changed to0
.
As there are more than one language in .vue
file, the different behaviors like mapping or completion may be expected under different tags.
This plugin provides a function to get the tag where the cursor is in.
GetVueTag() => String
Return value is 'template', 'script' or 'style'.
autocmd FileType vue inoremap <buffer><expr> : InsertColon()
function! InsertColon()
let tag = GetVueTag()
if tag == 'template'
return ':'
else
return ': '
endif
endfunction
Currently emmet-vim works regarding your HTML/CSS/JavaScript emmet settings, but it depends on how emmet-vim gets filetype
and may change in the future. Feel free to report an issue if any problem appears.
Since there are many sub languages included, most delays come from syntax files overload. A variable named b:current_loading_main_syntax
is set to vue
which can be used as loading condition if you'd like to manually find and modify the syntax files causing overload.
For example, the builtin syntax sass.vim
and less.vim
in vim8.1 runtime and pug.vim
in vim-pug/syntax will always load css.vim
which this plugin already loads. It can be optimized like
- runtime! syntax/css.vim
+ if !exists("b:current_loading_main_syntax")
+ runtime! syntax/css.vim
+ endif
This plugin is under The Unlicense. Other than this, lib/indent/*
files are extracted from vim runtime.