vim-vue-plugin

Vim syntax and indent plugin for .vue files. Mainly inspired by mxw/vim-jsx.

Installation

This plugin works if filetype is set to vue. Please stay up to date. Feel free to open an issue or pull request.

How it works

Since .vue is a combination of CSS, HTML and JavaScript, so is vim-vue-plugin. (Like XML and JavaScript for .jsx).

Supports

• Vue directives.
• Less/Sass/Scss, Pug with vim-pug, Coffee with vim-coffee-script, TypeScript with typescript-vim or yats.vim, Stylus with vim-stylus.^
• A builtin foldexpr foldmethod.^
• emmet-vim HTML/CSS/JavaScript filetype detection.
• .wpy files from WePY.

^: see Configuration for details. Relative plugins need to be installed.

Configuration

Set global variable to 1 to enable or 0 to disable. Ex:

let g:vim_vue_plugin_load_full_syntax = 1

*: Vim may be slow if the feature is enabled. Find a balance between syntax highlight and speed. By the way, custom syntax can be added in ~/.vim/syntax or $VIM/vimfiles/syntax.

+: 0 for .vue and 1 for .wpy

Note

• g:vim_vue_plugin_load_full_syntax applies to other HTML/Sass/Less plugins.
• filetype is set to vue so autocmds and other settings for javascript have to be manually enabled for vue.

Context based behavior

As there are more than one language in .vue file, the different behaviors like mapping or completion and local options, may be required under different tags or subtypes(current language type).

This plugin provides functions to get the tag/subtype where the cursor is in.

• GetVueTag() => String Return value is 'template', 'script' or 'style'.

  " Example
  autocmd FileType vue inoremap <buffer><expr> : InsertColon()
  
  function! InsertColon()
    let tag = GetVueTag()
    return tag == 'template' ? ':' : ': '
  endfunction

• GetVueSubtype() => String Return value is one of 'html', 'javascript', 'css', 'scss', ...

You can also define an event listener function OnChangeVueSubtype(subtype) in your vimrc to get the subtype and set its local options whenever it changes.

" Set local options based on subtype
function! OnChangeVueSubtype(subtype)
  " echom 'subtype is '.a:subtype
  if a:subtype == 'html'
    setlocal commentstring=<!--%s-->
    setlocal comments=s:<!--,m:\ \ \ \ ,e:-->
  elseif a:subtype =~ 'css'
    setlocal comments=s1:/*,mb:*,ex:*/ commentstring&
  else
    setlocal commentstring=//%s
    setlocal comments=sO:*\ -,mO:*\ \ ,exO:*/,s1:/*,mb:*,ex:*/,://
  endif
endfunction

emmet-vim

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.

Avoid overload

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

Acknowledgments & Refs

• mxw/vim-jsx

• Single File Components

See also

• vim-svelte-plugin

  Svelte is a compilation web framework which shares a similar syntax to Vue.

License

This plugin is under The Unlicense. Other than this, lib/indent/* files are extracted from vim runtime.