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.

Plugin 'posva/vim-vue'

cd ~/.vim/bundle && \
git clone https://github.com/posva/vim-vue.git

git clone https://github.com/posva/vim-vue.git ~/.vim/pack/plugins/start/vim-vue

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

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.

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).

tcomment has some support for Vue files with multiple languages, without any extra configuration.

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.

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

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'