Fix empty Vue attribute string's highlight issue

15: Moved Log function to autoload for global access

.gitignore

@@ -1 +1,2 @@
 README.html
+test.vue

.travis.yml

@@ -0,0 +1,7 @@
+language: minimal
+
+install:
+  - git clone --depth=1 https://github.com/leafOfTree/test ../test
+
+script:
+  - bash ../test/start.sh vue vim-vue-plugin

README.md

@@ -1,30 +1,40 @@
-# vim-vue-plugin
+# vim-vue-plugin [![Build Status][12]](https://travis-ci.com/leafOfTree/vim-vue-plugin)
+
+<p align="center">
+<a href="https://github.com/altercation/vim-colors-solarized">
+<img alt="screenshot" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-screenshot.png" width="200" />
+</a>
+</p>
 
 Vim syntax and indent plugin for `.vue` files. Mainly inspired by [mxw/vim-jsx][1].
 
-## Install
+## Installation
 
-- Use [VundleVim][2]
+<details>
+<summary><a>How to install</a></summary>
+
+- [VundleVim][2]
 
         Plugin 'leafOfTree/vim-vue-plugin'
 
-- Use [vim-pathogen][5]
+- [vim-pathogen][5]
 
         cd ~/.vim/bundle && \
-        git clone https://github.com/leafOfTree/vim-vue-plugin
+        git clone https://github.com/leafOfTree/vim-vue-plugin --depth 1
 
-- Use [vim-plug][7]
+- [vim-plug][7]
 
         Plug 'leafOfTree/vim-vue-plugin'
         :PlugInstall
 
-- Or manually, clone this plugin, drop it in custom `path/to/this_plugin`, and add it to `rtp` in vimrc
+- Or manually, clone this plugin to `path/to/this_plugin`, and add it to `rtp` in vimrc
 
-        set rpt+=path/to/this_plugin
+        set rtp+=path/to/this_plugin
 
-Plugin works if `filetype` is set to `vue`. Please stay up to date. Feel free to open an issue or a pull request.
+<br />
+</details>
 
-**Note**: `filetype` used to be `javascript.vue`, which caused `javascript`syntax to be loaded multiple times and a significant delay. Now `filetype` is set to `vue` and autocmds for `javascript` have to be manually added for `vue`.
+This plugin works if `filetype` is set to `vue`. Please stay up to date. Feel free to open an issue or a pull request.
 
 ## How it works
 
@@ -32,43 +42,96 @@ Since `.vue` is a combination of CSS, HTML and JavaScript, so is `vim-vue-plugin
 
 Supports
 
-- Pug with [vim-pug][4] (see Configuration).
-- Less with or without [vim-less][9] (see Configuration).
-- Sass/Scss (see Configuration).
-- `.wpy` files from [WePY][6]
+- Vue directives.
+- Less/Sass/Scss, Pug with [vim-pug][4], Coffee with [vim-coffee-script][11].^
+- A builtin `foldexpr` foldmethod.^
+- [emmet-vim][10] HTML/CSS/JavaScript filetype detection.
+- `.wpy` files from [WePY][6].
+
+^: see Configuration for details.
 
 ## Configuration
 
-Set global variable to `1` to enable or `0` to disable.
-
-Ex:
+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 `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_load_full_syntax`\* | Enable: load all syntax files in `runtimepath` to enable related syntax plugins.<br> Disable: only in `$VIMRUNTIME/syntax`, `~/.vim/syntax` and `$VIM/vimfiles/syntax` | 0 |
+| `g:vim_vue_plugin_use_pug`\*          | Enable 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 sass/scss syntax for `<style lang="sass">`(or scss).                                            | 0 |
-| `g:vim_vue_plugin_debug`              | Echo debug message in `messages` list. Useful to debug if unexpendted indents occur.                   | 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 builtin `foldexpr` foldmethod.                                                                  | 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 balance between syntax highlight and speed. By the way, custom syntax could be added in `~/.vim/syntax` or `$VIM/vimfiles/syntax`.
+\*: 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`. 
 
-## Screenshot
+**Note**
 
-![screenshot](https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-screenshot.png)
+- `filetype` is set to `vue` so autocmds and other custom settings for `javascript` have to be manually enabled for `vue`.
+- `g:vim_vue_plugin_load_full_syntax` applies to `JavaScript/HTML/CSS/SASS/LESS`.
+- `g:vim_vue_plugin_use_foldexpr` default value used to be `1`, but it's changed to `0` now.
+
+## Context based behavior
+
+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'`.
+
+### Example
+
+```vim
+autocmd FileType vue inoremap <buffer><expr> : InsertColon()
+
+function! InsertColon()
+  let tag = GetVueTag()
+  
+  if tag == 'template'
+    return ':'
+  else
+    return ': '
+  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 will always load `css.vim` which this plugin already loads. It can be optimized like
+
+```diff
+- runtime! syntax/css.vim
++ if !exists("b:current_loading_main_syntax")
++   runtime! syntax/css.vim
++ endif
+```
 
 ## Acknowledgments & Refs
 
-[mxw/vim-jsx][1]
+- [mxw/vim-jsx][1]
 
-[Single File Components][3]
+- [Single File Components][3]
+
+## See also
+
+- [vim-svelte-plugin][9] 
+
+    [Svelte][13] is a compilation web framework which shares a similar syntax to Vue.
 
 ## License
 
-This plugin is under [The Unlicense][8].
+This plugin is under [The Unlicense][8]. Other than this, `lib/indent/*` files are extracted from vim runtime.
 
 [1]: https://github.com/mxw/vim-jsx "mxw: vim-jsx"
 [2]: https://github.com/VundleVim/Vundle.vim
@@ -78,4 +141,8 @@ This plugin is under [The Unlicense][8].
 [6]: https://tencent.github.io/wepy
 [7]: https://github.com/junegunn/vim-plug
 [8]: https://choosealicense.com/licenses/unlicense/
-[9]: https://github.com/groenewege/vim-less
+[9]: https://github.com/leafOfTree/vim-svelte-plugin
+[10]: https://github.com/mattn/emmet-vim
+[11]: https://github.com/kchmck/vim-coffee-script
+[12]: https://travis-ci.com/leafOfTree/vim-vue-plugin.svg?branch=master
+[13]: https://svelte.dev/

autoload/vue.vim

@@ -0,0 +1,9 @@
+let s:name = 'vim-vue-plugin'
+let s:debug = exists("g:vim_vue_plugin_debug")
+      \ && g:vim_vue_plugin_debug == 1
+
+function! vue#Log(msg)
+  if s:debug
+    echom '['.s:name.']['.v:lnum.'] '.a:msg
+  endif
+endfunction

filetype.vim

@@ -7,10 +7,3 @@ function! s:setFiletype()
   " then set filetype
   let &filetype = 'vue'
 endfunction
-
-if !exists("g:vim_vue_plugin_has_init_indent")
-  let ext = expand("%:e")
-  if ext == 'wpy'
-    let g:vim_vue_plugin_has_init_indent = 1
-  endif
-endif

ftplugin/vue.vim

@@ -0,0 +1,17 @@
+if exists("b:did_ftplugin") | finish | endif
+let b:did_ftplugin = 1
+
+setlocal matchpairs+=<:>
+
+if exists("loaded_matchit")
+  let b:match_ignorecase = 1
+  let b:match_words = '<:>,' .
+        \ '<\@<=[ou]l\>[^>]*\%(>\|$\):<\@<=li\>:<\@<=/[ou]l>,' .
+        \ '<\@<=dl\>[^>]*\%(>\|$\):<\@<=d[td]\>:<\@<=/dl>,' .
+        \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>'
+endif
+
+" Indent correctly with template string for vim-javascript/builtin
+" indentexpr
+let b:syng_str = '^\%(.*template\)\@!.*string\|special'
+let b:syng_strcom = '^\%(.*template\)\@!.*string\|comment\|regex\|special\|doc'

ftplugin/vue/fold.vim

@@ -0,0 +1,112 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:use_foldexpr = exists("g:vim_vue_plugin_use_foldexpr")
+      \ && g:vim_vue_plugin_use_foldexpr == 1
+"}}}
+
+if !s:use_foldexpr | finish | endif
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Settings {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+setlocal foldmethod=expr
+setlocal foldexpr=GetVueFold(v:lnum)
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Variables {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:empty_line = '\v^\s*$'
+let s:block_end = '\v^\s*}|]|\)'
+let s:vue_tag_start = '\v^\s*\<(script|style|template)' 
+let s:vue_tag_end = '\v^\s*\<\/(script|style|template)' 
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Functions {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"  see :h fold-expr
+"  value             meaning
+"  0                 the line is not in a fold
+"  1, 2, ..          the line is in a fold with this level
+"  -1                the fold level is undefined, use the fold level of a
+"                    line before or after this line, whichever is the
+"                    lowest.
+"  "="               use fold level from the previous line
+"  "a1", "a2", ..    add one, two, .. to the fold level of the previous
+"			               line, use the result for the current line
+"  "s1", "s2", ..    subtract one, two, .. from the fold level of the
+"  ">1", ">2", ..    a fold with this level starts at this line
+"  "<1", "<2", ..    a fold with this level ends at this line
+function! GetVueFold(lnum)
+  let this_line = getline(a:lnum)
+  let next_line = getline(a:lnum + 1)
+  if a:lnum > 1
+    let prev_line = getline(a:lnum - 1)
+  endif
+
+  " Handle empty lines
+  if this_line =~ s:empty_line
+    return -1
+  endif
+
+  " Handle start/end tags
+  if this_line =~ s:vue_tag_start
+    return '>1'
+  endif
+  if this_line =~ s:vue_tag_end
+    " If return '<1', fold will get incorrect with prev line
+    return 1
+  endif
+
+  " Fold by indent
+  let this_indent = s:IndentLevel(a:lnum)
+  let next_indent = s:IndentLevel(s:NextNonBlankLine(a:lnum))
+
+  if a:lnum > 1
+    let prev_indent = s:IndentLevel(a:lnum - 1)
+
+    if this_indent < prev_indent
+      return prev_indent
+    endif
+  endif
+
+  if this_indent >= next_indent 
+    return this_indent
+  endif
+
+  if this_indent < next_indent
+    return '>'.next_indent
+  endif
+endfunction
+
+function! s:IndentLevel(lnum)
+  " Add 1 to indentLevel, so start/end tags can fold properly
+  return indent(a:lnum) / &shiftwidth + 1
+endfunction
+
+function! s:NextNonBlankLine(lnum)
+  let next_line = a:lnum + 1
+  let last_line = line('$')
+
+  while next_line <= last_line
+    if getline(next_line) =~ '\v\S'
+      return next_line
+    endif
+
+    let next_line += 1
+  endwhile
+
+  return 0
+endfunction
+"}}}
+" vim: fdm=marker

indent/vue.vim

@@ -1,154 +1,269 @@
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Vim indent file
 "
-" Language: Vue (Wepy)
+" Language: Vue
 " Maintainer: leafOfTree <leafvocation@gmail.com>
 "
 " CREDITS: Inspired by mxw/vim-jsx.
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-if exists("b:did_vue_indent")
-    finish
+if exists("b:did_indent")
+  finish
 endif
 
-se sw=2 ts=2
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Variables {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Let <template> handled by HTML
+let s:vue_tag_start = '\v^\s*\<(script|style)' 
+let s:vue_tag_end = '\v^\s*\<\/(script|style)'
+let s:template_tag = '\v^\s*\<\/?template'
+let s:empty_tagname = '(area|base|br|col|embed|hr|input|img|keygen|link|meta|param|source|track|wbr)'
+let s:empty_tag = '\v\<'.s:empty_tagname.'[^/]*\>' 
+let s:empty_tag_start = '\v\<'.s:empty_tagname.'[^\>]*$' 
+let s:empty_tag_end = '\v^\s*[^\<\>\/]*\>\s*' 
+let s:tag_end = '\v^\s*\/?\>\s*'
+"}}}
 
-let s:name = 'vim-vue-plugin'
-let s:debug = exists("g:vim_vue_plugin_debug")
-      \ && g:vim_vue_plugin_debug == 1
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 let s:use_pug = exists("g:vim_vue_plugin_use_pug")
       \ && g:vim_vue_plugin_use_pug == 1
 let s:use_sass = exists("g:vim_vue_plugin_use_sass")
       \ && g:vim_vue_plugin_use_sass == 1
-let s:has_init_indent = exists("g:vim_vue_plugin_has_init_indent")
-      \ && g:vim_vue_plugin_has_init_indent == 1
+let s:use_coffee = exists("g:vim_vue_plugin_use_coffee")
+      \ && g:vim_vue_plugin_use_coffee == 1
 
-" Let <template> handled by HTML indent
-let s:vue_tag = '\v^\<(script|style)' 
+let s:has_init_indent = 0
+if !exists("g:vim_vue_plugin_has_init_indent")
+  let ext = expand("%:e")
+  if ext == 'wpy'
+    let s:has_init_indent = 1
+  endif
+elseif g:vim_vue_plugin_has_init_indent == 1
+  let s:has_init_indent = 1
+endif
+"}}}
 
-let s:vue_end_tag = '\v\<\/(template|script|style)'
-let s:end_tag = '^\s*\/\?>\s*'
-
-" Save the current JavaScript indentexpr.
-let b:vue_js_indentexpr = &indentexpr
-
-" Load xml indent method
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Load indent method {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Use lib/indent/ files for compatibility
 unlet! b:did_indent
-runtime! indent/xml.vim
+runtime lib/indent/xml.vim
 
-" Load css indent method
 unlet! b:did_indent
-runtime! indent/css.vim
+runtime lib/indent/css.vim
+
+" Use normal indent files
+unlet! b:did_indent
+runtime! indent/javascript.vim
+let b:javascript_indentexpr = &indentexpr
 
 if s:use_pug
-  " Load pug indent method
   unlet! b:did_indent
   runtime! indent/pug.vim
 endif
 
 if s:use_sass
-  " Load sass indent method
   unlet! b:did_indent
   runtime! indent/sass.vim
 endif
 
-let b:did_indent = 1
-let b:did_vue_indent = 1
+if s:use_coffee
+  unlet! b:did_indent
+  runtime! indent/coffee.vim
+endif
+"}}}
 
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Settings {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+setlocal sw=2 ts=2
 " JavaScript indentkeys
-setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e
+setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,:
 " XML indentkeys
 setlocal indentkeys+=*<Return>,<>>,<<>,/
-
 setlocal indentexpr=GetVueIndent()
+"}}}
 
-function! SynsEOL(lnum)
-  let lnum = prevnonblank(a:lnum)
-  let col = strlen(getline(lnum))
-  return map(synstack(lnum, col), 'synIDattr(v:val, "name")')
-endfunction
-
-function! SynsHTML(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueTemplate)'
-endfunction
-
-function! SynsPug(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueTemplatePug)'
-endfunction
-
-function! SynsSASS(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueStyleSASS)'
-endfunction
-
-function! SynsCSS(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueStyle)'
-endfunction
-
-function! SynsVueScope(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueStyle)|(vueScript)'
-endfunction
-
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Functions {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 function! GetVueIndent()
+  let prevlnum = prevnonblank(v:lnum - 1)
+  let prevline = getline(prevlnum)
+  let prevsyns = s:SynsEOL(prevlnum)
+  let prevsyn = get(prevsyns, 0, '')
+
   let curline = getline(v:lnum)
-  let prevline = getline(v:lnum - 1)
-  let cursyns = SynsEOL(v:lnum)
-  let prevsyns = SynsEOL(v:lnum - 1)
+  let cursyns = s:SynsEOL(v:lnum)
+  let cursyn = get(cursyns, 0, '')
 
-  if SynsPug(prevsyns)
-    call s:LogMsg('syntax: pug')
-    let ind = GetPugIndent()
-
-  elseif SynsHTML(prevsyns)
-    call s:LogMsg('syntax: html')
+  if s:SynHTML(cursyn)
+    call vue#Log('syntax: html')
     let ind = XmlIndentGet(v:lnum, 0)
+    if prevline =~? s:empty_tag
+      call vue#Log('previous line is an empty tag')
+      let ind = ind - &sw
+    endif
 
     " Align '/>' and '>' with '<' for multiline tags.
-    if curline =~? s:end_tag 
+    if curline =~? s:tag_end 
       let ind = ind - &sw
     endif
     " Then correct the indentation of any element following '/>' or '>'.
-    if prevline =~? s:end_tag
+    if prevline =~? s:tag_end
       let ind = ind + &sw
+
+      " Decrease indent if prevlines are a multiline empty tag
+      let [start, end] = s:PrevMultilineEmptyTag(v:lnum)
+      if end == prevlnum
+        call vue#Log('previous line is a multiline empty tag')
+        let ind = ind - &sw
+      endif
     endif
-  elseif SynsSASS(prevsyns)
-    call s:LogMsg('syntax: sass')
+  elseif s:SynPug(cursyn)
+    call vue#Log('syntax: pug')
+    let ind = GetPugIndent()
+  elseif s:SynCoffee(cursyn)
+    call vue#Log('syntax: coffee')
+    let ind = GetCoffeeIndent(v:lnum)
+  elseif s:SynSASS(cursyn)
+    call vue#Log('syntax: sass')
     let ind = GetSassIndent()
-  elseif SynsCSS(prevsyns)
-    call s:LogMsg('syntax: css')
+  elseif s:SynStyle(cursyn)
+    call vue#Log('syntax: style')
     let ind = GetCSSIndent()
   else
-    call s:LogMsg('syntax: javascript')
-    if len(b:vue_js_indentexpr)
-      let ind = eval(b:vue_js_indentexpr)
+    call vue#Log('syntax: javascript')
+    if len(b:javascript_indentexpr)
+      let ind = eval(b:javascript_indentexpr)
     else
       let ind = cindent(v:lnum)
     endif
   endif
 
-  if curline =~? s:vue_tag || curline =~? s:vue_end_tag 
-    call s:LogMsg('current line is vue tag')
+  if curline =~? s:vue_tag_start || curline =~? s:vue_tag_end 
+        \|| prevline =~? s:vue_tag_end
+        \|| (curline =~ s:template_tag && s:SynPug(cursyn))
+    call vue#Log('current line is vue tag or previous line is vue end tag')
+    call vue#Log('... or current line is pug template tag')
     let ind = 0
   elseif s:has_init_indent
-    if SynsVueScope(cursyns) && ind == 0
-      call s:LogMsg('add initial indent')
+    if s:SynVueScriptOrStyle(cursyn) && ind < 1
+      call vue#Log('add initial indent')
       let ind = &sw
     endif
-  elseif prevline =~? s:vue_tag || prevline =~? s:vue_end_tag
-    call s:LogMsg('prev line is vue tag')
-    let ind = 0
+  else
+    let prevlnum_noncomment = s:PrevNonBlacnkNonComment(v:lnum)
+    let prevline_noncomment = getline(prevlnum_noncomment)
+    if prevline_noncomment =~? s:vue_tag_start
+      call vue#Log('previous line is vue tag start')
+      let ind = 0
+    endif
   endif
-  call s:LogMsg('result indent: '.ind)
 
+  call vue#Log('indent: '.ind)
   return ind
 endfunction
 
-function! s:LogMsg(msg)
-  if s:debug
-    echom '['.s:name.'] '.a:msg
-  endif
+function! s:SynsEOL(lnum)
+  let lnum = prevnonblank(a:lnum)
+  let col = strlen(getline(lnum))
+  return map(synstack(lnum, col), 'synIDattr(v:val, "name")')
 endfunction
+
+function! s:SynHTML(syn)
+  return a:syn ==? 'htmlVueTemplate'
+endfunction
+
+function! s:SynPug(syn)
+  return a:syn ==? 'pugVueTemplate'
+endfunction
+
+function! s:SynCoffee(syn)
+  return a:syn ==? 'coffeeVueScript'
+endfunction
+
+function! s:SynSASS(syn)
+  return a:syn ==? 'cssSassVueStyle'
+endfunction
+
+function! s:SynStyle(syn)
+  return a:syn =~? 'VueStyle'
+endfunction
+
+function! s:SynVueScriptOrStyle(syn)
+  return a:syn =~? '\v(VueStyle)|(VueScript)'
+endfunction
+
+function! s:PrevMultilineEmptyTag(lnum)
+  let lnum = a:lnum
+  let lnums = [0, 0]
+  while lnum > 0
+    let line = getline(lnum)
+    if line =~? s:empty_tag_end
+      let lnums[1] = lnum
+    endif
+    if line =~? s:empty_tag_start
+      let lnums[0] = lnum
+      return lnums
+    endif
+    let lnum = lnum - 1
+  endwhile
+endfunction
+
+function! s:PrevNonBlacnkNonComment(lnum)
+  let curline = getline(lnum)
+  let cursyns = s:SynsEOL(a:lnum)
+  let cursyn = get(cursyns, 1, '')
+  if cursyn =~? 'comment' && !empty(curline)
+    return prevnonblank(a:lnum - 1)
+  endif
+
+  let lnum = a:lnum - 1
+  let prevlnum = prevnonblank(lnum)
+  let prevsyns = s:SynsEOL(prevlnum)
+  let prevsyn = get(prevsyns, 1, '')
+  while prevsyn =~? 'comment' && lnum > 1
+    let lnum = lnum - 1
+    let prevlnum = prevnonblank(lnum)
+    let prevsyns = s:SynsEOL(prevlnum)
+    let prevsyn = get(prevsyns, 1, '')
+  endwhile
+  return prevlnum
+endfunction
+
+function! GetVueTag()
+  let lnum = getcurpos()[1]
+  let cursyns = s:SynsEOL(lnum)
+  let syn = get(cursyns, 0, '')
+
+  if syn =~ 'VueTemplate'
+    let tag = 'template'
+  elseif syn =~ 'VueScript'
+    let tag = 'script'
+  elseif syn =~ 'VueStyle'
+    let tag = 'style'
+  else
+    let tag = ''
+  endif
+
+  return tag
+endfunction
+"}}}
+
+let b:did_indent = 1
+" vim: fdm=marker

lib/indent/css.vim

@@ -0,0 +1,87 @@
+" Vim indent file
+" Language:	    CSS
+" Maintainer:	    Nikolai Weibull <now@bitwi.se>
+" Latest Revision:  2012-05-30
+"		    Use of shiftwidth() added by Oleg Zubchenko.	
+
+" Changes: 1) Reacquire the line while checking comment lines.
+
+if exists("b:did_indent")
+  finish
+endif
+let b:did_indent = 1
+
+setlocal indentexpr=GetCSSIndent()
+setlocal indentkeys=0{,0},!^F,o,O
+setlocal nosmartindent
+
+let b:undo_indent = "setl smartindent< indentkeys< indentexpr<"
+
+if exists("*GetCSSIndent")
+  finish
+endif
+let s:keepcpo= &cpo
+set cpo&vim
+
+function s:prevnonblanknoncomment(lnum)
+  let lnum = a:lnum
+  while lnum > 1
+    let lnum = prevnonblank(lnum)
+    let line = getline(lnum)
+    if line =~ '\*/'
+      while lnum > 1 && line !~ '/\*'
+        let lnum -= 1
+        let line = getline(lnum)
+      endwhile
+      if line =~ '^\s*/\*'
+        let lnum -= 1
+      else
+        break
+      endif
+    else
+      break
+    endif
+  endwhile
+  return lnum
+endfunction
+
+function s:count_braces(lnum, count_open)
+  let n_open = 0
+  let n_close = 0
+  let line = getline(a:lnum)
+  let pattern = '[{}]'
+  let i = match(line, pattern)
+  while i != -1
+    if synIDattr(synID(a:lnum, i + 1, 0), 'name') !~ 'css\%(Comment\|StringQ\{1,2}\)'
+      if line[i] == '{'
+        let n_open += 1
+      elseif line[i] == '}'
+        if n_open > 0
+          let n_open -= 1
+        else
+          let n_close += 1
+        endif
+      endif
+    endif
+    let i = match(line, pattern, i + 1)
+  endwhile
+  return a:count_open ? n_open : n_close
+endfunction
+
+function GetCSSIndent()
+  let line = getline(v:lnum)
+  if line =~ '^\s*\*'
+    return cindent(v:lnum)
+  endif
+
+  let pnum = s:prevnonblanknoncomment(v:lnum - 1)
+  if pnum == 0
+    return 0
+  endif
+
+  return indent(pnum) + s:count_braces(pnum, 1) * shiftwidth()
+        \ - s:count_braces(v:lnum, 0) * shiftwidth()
+endfunction
+
+let &cpo = s:keepcpo
+unlet s:keepcpo

lib/indent/xml.vim

@@ -0,0 +1,107 @@
+" Language:	xml
+" Maintainer:	Johannes Zellner <johannes@zellner.org>
+" Last Change:	2017 Jun 13
+" Notes:	1) does not indent pure non-xml code (e.g. embedded scripts)
+"		2) will be confused by unbalanced tags in comments
+"		or CDATA sections.
+"		2009-05-26 patch by Nikolai Weibull
+" TODO: 	implement pre-like tags, see xml_indent_open / xml_indent_close
+
+" Only load this indent file when no other was loaded.
+if exists("b:did_indent")
+    finish
+endif
+let b:did_indent = 1
+let s:keepcpo= &cpo
+set cpo&vim
+
+" [-- local settings (must come before aborting the script) --]
+setlocal indentexpr=XmlIndentGet(v:lnum,1)
+setlocal indentkeys=o,O,*<Return>,<>>,<<>,/,{,}
+
+if !exists('b:xml_indent_open')
+    let b:xml_indent_open = '.\{-}<\a'
+    " pre tag, e.g. <address>
+    " let b:xml_indent_open = '.\{-}<[/]\@!\(address\)\@!'
+endif
+
+if !exists('b:xml_indent_close')
+    let b:xml_indent_close = '.\{-}</'
+    " end pre tag, e.g. </address>
+    " let b:xml_indent_close = '.\{-}</\(address\)\@!'
+endif
+
+let &cpo = s:keepcpo
+unlet s:keepcpo
+
+" [-- finish, if the function already exists --]
+if exists('*XmlIndentGet')
+  finish
+endif
+
+let s:keepcpo= &cpo
+set cpo&vim
+
+fun! <SID>XmlIndentWithPattern(line, pat)
+    let s = substitute('x'.a:line, a:pat, "\1", 'g')
+    return strlen(substitute(s, "[^\1].*$", '', ''))
+endfun
+
+" [-- check if it's xml --]
+fun! <SID>XmlIndentSynCheck(lnum)
+    if '' != &syntax
+	let syn1 = synIDattr(synID(a:lnum, 1, 1), 'name')
+	let syn2 = synIDattr(synID(a:lnum, strlen(getline(a:lnum)) - 1, 1), 'name')
+	if '' != syn1 && syn1 !~ 'xml' && '' != syn2 && syn2 !~ 'xml'
+	    " don't indent pure non-xml code
+	    return 0
+	elseif syn1 =~ '^xmlComment' && syn2 =~ '^xmlComment'
+	    " indent comments specially
+	    return -1
+	endif
+    endif
+    return 1
+endfun
+
+" [-- return the sum of indents of a:lnum --]
+fun! <SID>XmlIndentSum(lnum, style, add)
+    let line = getline(a:lnum)
+    if a:style == match(line, '^\s*</')
+	return (shiftwidth() *
+	\  (<SID>XmlIndentWithPattern(line, b:xml_indent_open)
+	\ - <SID>XmlIndentWithPattern(line, b:xml_indent_close)
+	\ - <SID>XmlIndentWithPattern(line, '.\{-}/>'))) + a:add
+    else
+	return a:add
+    endif
+endfun
+
+fun! XmlIndentGet(lnum, use_syntax_check)
+    " Find a non-empty line above the current line.
+    let lnum = prevnonblank(a:lnum - 1)
+
+    " Hit the start of the file, use zero indent.
+    if lnum == 0
+	return 0
+    endif
+
+    if a:use_syntax_check
+	let check_lnum = <SID>XmlIndentSynCheck(lnum)
+	let check_alnum = <SID>XmlIndentSynCheck(a:lnum)
+	if 0 == check_lnum || 0 == check_alnum
+	    return indent(a:lnum)
+	elseif -1 == check_lnum || -1 == check_alnum
+	    return -1
+	endif
+    endif
+
+    let ind = <SID>XmlIndentSum(lnum, -1, indent(lnum))
+    let ind = <SID>XmlIndentSum(a:lnum, 0, ind)
+
+    return ind
+endfun
+
+let &cpo = s:keepcpo
+unlet s:keepcpo
+
+" vim:ts=8

syntax/vue-html.vim

@@ -0,0 +1,85 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:highlight_vue_attr = exists("g:vim_vue_plugin_highlight_vue_attr")
+      \ && g:vim_vue_plugin_highlight_vue_attr == 1
+")}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax highlight {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+syntax match VueComponentName containedin=htmlTagN '\v\C<[a-z0-9]+(-[a-z0-9]+)+>'
+syntax match VueComponentName containedin=htmlTagN '\v\C<([A-Z][a-zA-Z0-9]+)+>'
+syntax keyword VueComponentName containedin=htmlTagN component transition slot
+
+syntax match VueAttr '\v(\S)@<![v:\@][^\=\>[:blank:]]+(\=\"[^"]*\")?' 
+      \ keepend
+      \ containedin=htmlTag 
+      \ contains=VueKey,VueQuote
+
+syntax match VueKey contained '\v[v:\@][^\=\>[:blank:]]+'
+syntax region VueQuote contained 
+      \ start='"' end='"' 
+      \ contains=VueValue
+syntax match VueValue contained '\v\"\zs[^"]+\ze\"'
+      \ contains=VueInject,@simpleJavascriptExpression
+
+syntax match VueInject contained '\v\$\w*'
+
+syntax region VueExpression 
+      \ containedin=html.*
+      \ matchgroup=VueBrace
+      \ transparent
+      \ start="{{"
+      \ end="}}"
+syntax region VueExpression 
+      \ containedin=htmlVueTemplate,pugVueTemplate,VueValue,htmlString,htmlValue
+      \ contains=@simpleJavascriptExpression
+      \ matchgroup=VueBrace
+      \ start="{{"
+      \ end="}}"
+
+" Wepy directive syntax
+syntax match VueAttr '\v(\S)@<!wx[^\=]+(\=\"[^"]*\")?'
+      \ containedin=htmlTag  
+      \ contains=VueKey,VueQuote
+
+syntax match VueKey contained '\vwx[^\=]+'
+syntax match VueCustomTag containedin=htmlTagN '\v<(view|text|block|image)>'
+
+syntax cluster simpleJavascriptExpression contains=javaScriptStringS,javaScriptStringD,javascriptNumber,javaScriptOperator
+
+" JavaScript syntax
+syntax region javaScriptStringS	
+      \ start=+'+  skip=+\\\\\|\\'+  end=+'\|$+	contained
+syntax region javaScriptStringD	
+      \ start=+"+  skip=+\\\\\|\\"+  end=+"\|$+	contained
+syntax match javaScriptNumber '\v<-?\d+L?>|0[xX][0-9a-fA-F]+>' contained
+syntax match javaScriptOperator '[-!|&+<>=%*~^]' contained
+syntax match javaScriptOperator '\v(*)@<!/(/|*)@!' contained
+syntax keyword javaScriptOperator delete instanceof typeof void new in of contained
+
+highlight default link VueAttr htmlTag
+if s:highlight_vue_attr
+  highlight default link VueKey Type
+  highlight default link VueQuote VueAttr
+  highlight default link VueValue None
+else
+  highlight default link VueKey htmlArg
+  highlight default link VueQuote String
+  highlight default link VueValue String
+endif
+highlight default link VueInject Constant
+highlight default link VueBrace Type
+highlight default link VueComponentName htmlTagName
+highlight default link VueCustomTag htmlTagName
+highlight default link javaScriptStringS String
+highlight default link javaScriptStringD String
+highlight default link javaScriptNumber	Constant
+highlight default link javaScriptOperator	Operator
+"}}}
+" vim: fdm=marker

syntax/vue.vim

@@ -1,7 +1,7 @@
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Vim syntax file
 "
-" Language: Vue (Wepy)
+" Language: Vue
 " Maintainer: leaf <leafvocation@gmail.com>
 "
 " CREDITS: Inspired by mxw/vim-jsx.
@@ -11,6 +11,13 @@ if exists("b:current_syntax") && b:current_syntax == 'vue'
   finish
 endif
 
+" For advanced users, this variable can be used to avoid overload
+let b:current_loading_main_syntax = 'vue'
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 let s:load_full_syntax = exists("g:vim_vue_plugin_load_full_syntax")
       \ && g:vim_vue_plugin_load_full_syntax == 1
 let s:use_pug = exists("g:vim_vue_plugin_use_pug")
@@ -19,7 +26,15 @@ let s:use_less = exists("g:vim_vue_plugin_use_less")
       \ && g:vim_vue_plugin_use_less == 1
 let s:use_sass = exists("g:vim_vue_plugin_use_sass")
       \ && g:vim_vue_plugin_use_sass == 1
+let s:use_coffee = exists("g:vim_vue_plugin_use_coffee")
+      \ && g:vim_vue_plugin_use_coffee == 1
+"}}}
 
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Functions {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 function! s:LoadSyntax(group, type)
   if s:load_full_syntax
     call s:LoadFullSyntax(a:group, a:type)
@@ -30,106 +45,209 @@ endfunction
 
 function! s:LoadDefaultSyntax(group, type)
   unlet! b:current_syntax
-  exec 'syn include '.a:group.' $VIMRUNTIME/syntax/'.a:type.'.vim'
-  exec 'silent! syn include '.a:group.' $VIM/vimfiles/syntax/'.a:type.'.vim'
-  exec 'silent! syn include '.a:group.' $HOME/.vim/syntax/'.a:type.'.vim'
+  let syntaxPaths = ['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim']
+  for path in syntaxPaths
+    let file = expand(path).'/syntax/'.a:type.'.vim'
+    if filereadable(file)
+      execute 'syntax include '.a:group.' '.file
+    endif
+  endfor
 endfunction
 
 function! s:LoadFullSyntax(group, type)
-  unlet! b:current_syntax
-  exec 'syn include '.a:group.' syntax/'.a:type.'.vim'
+  call s:SetCurrentSyntax(a:type)
+  execute 'syntax include '.a:group.' syntax/'.a:type.'.vim'
 endfunction
 
-"""""""""""""""""""""""""""""""""""""""""""""""
+" Settings to avoid syntax overload
+function! s:SetCurrentSyntax(type)
+  if a:type == 'coffee'
+    syntax cluster coffeeJS contains=@htmlJavaScript
+    let b:current_syntax = 'vue'
+  else
+    unlet! b:current_syntax
+  endif
+endfunction
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
-" Main
+" Load main syntax {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Load syntax/*.vim to syntax group
 call s:LoadSyntax('@HTMLSyntax', 'html')
 
-" Avoid overload
+" Load vue-html syntax
+runtime syntax/vue-html.vim
+
+" Avoid overload. 'syntax/html.vim' defines htmlCss and htmlJavaScript
 if hlexists('cssTagName') == 0
   call s:LoadSyntax('@htmlCss', 'css')
 endif
 
 " Avoid overload
-if hlexists('jsNoise') == 0
-  call s:LoadSyntax('@jsAll', 'javascript')
+if hlexists('javaScriptComment') == 0
+  call vue#Log('load javascript cluster')
+  call s:LoadSyntax('@htmlJavaScript', 'javascript')
 endif
+"}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
-" pre-processors
+" Load pre-processors syntax {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " If pug is enabled, load vim-pug syntax
 if s:use_pug
   call s:LoadFullSyntax('@PugSyntax', 'pug')
 endif
 
-" If sass is enabled, load sass syntax 
-if s:use_sass
-  call s:LoadSyntax('@SassSyntax', 'sass')
-endif
-
 " If less is enabled, load less syntax 
 if s:use_less
   call s:LoadSyntax('@LessSyntax', 'less')
+  runtime! after/syntax/less.vim
 endif
 
-if s:use_sass || s:use_less
-  syn region lessDefinition transparent matchgroup=cssBraces contains=@LessSyntax
-        \ start="{" 
-        \ end="}" 
-  syn region sassDefinition transparent matchgroup=cssBraces contains=@SassSyntax
-        \ start="{" 
-        \ end="}" 
+" If sass is enabled, load sass syntax 
+if s:use_sass
+  call s:LoadSyntax('@SassSyntax', 'sass')
+  runtime! after/syntax/sass.vim
 endif
 
+" If CoffeeScript is enabled, load the syntax. Keep name consistent with
+" vim-coffee-script/after/html.vim
+if s:use_coffee
+  call s:LoadFullSyntax('@htmlCoffeeScript', 'coffee')
+endif
+"}}}
 
-let b:current_syntax = 'vue'
-
-" Find tag <template> / <script> / <style> and enable currespond syntax
-syn region vueTemplate 
-      \ start=+<template\(\s.\{-}\)\?>+ 
-      \ end=+^</template>+ 
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax highlight {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" All start with html/javascript/css for emmet-vim in-file type detection
+syntax region htmlVueTemplate fold
+      \ start=+<template[^>]*>+
+      \ end=+^</template>+
       \ keepend contains=@HTMLSyntax
-syn region vueTemplatePug 
-      \ start=+<template lang="pug"\(\s.\{-}\)\?>+ 
-      \ end=+</template>+ 
+" When template code is not well indented
+syntax region htmlVueTemplate fold
+      \ start=+<template[^>]*>+
+      \ end=+</template>\ze\n\(^$\n\)*<script>+
+      \ keepend contains=@HTMLSyntax
+
+syntax region javascriptVueScript fold 
+      \ start=+<script[^>]*>+
+      \ end=+</script>+
+      \ keepend contains=@htmlJavaScript,jsImport,jsExport,vueTag
+
+syntax region cssVueStyle fold
+      \ start=+<style[^>]*>+
+      \ end=+</style>+
+      \ keepend contains=@htmlCss,vueTag
+
+" Preprocessors syntax
+syntax region pugVueTemplate fold
+      \ start=+<template[^>]*lang="pug"[^>]*>+
+      \ end=+</template>+
       \ keepend contains=@PugSyntax,vueTag
 
-syn region vueScript 
-      \ start=+<script\(\s.\{-}\)\?>+ 
-      \ end=+</script>+ 
-      \ keepend contains=@jsAll,jsImport,jsExport,vueTag
+syntax region coffeeVueScript fold 
+      \ start=+<script[^>]*lang="coffee"[^>]*>+
+      \ end=+</script>+
+      \ keepend contains=@htmlCoffeeScript,jsImport,jsExport,vueTag
 
-syn region vueStyle 
-      \ start=+<style\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
-      \ keepend contains=@htmlCss,vueTag
-syn region vueStyleLESS 
-      \ start=+<style lang="less"\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
+syntax region cssLessVueStyle fold
+      \ start=+<style[^>]*lang="less"[^>]*>+
+      \ end=+</style>+
       \ keepend contains=@LessSyntax,vueTag
-syn region vueStyleSASS 
-      \ start=+<style lang="sass"\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
+syntax region cssSassVueStyle fold
+      \ start=+<style[^>]*lang="sass"[^>]*>+
+      \ end=+</style>+
       \ keepend contains=@SassSyntax,vueTag
-syn region vueStyleSCSS 
-      \ start=+<style lang="scss"\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
+syntax region cssScssVueStyle fold
+      \ start=+<style[^>]*lang="scss"[^>]*>+
+      \ end=+</style>+
       \ keepend contains=@SassSyntax,vueTag
 
-syn region vueTag contained start=+<[^/]+ end=+>+ contains=htmlTagN,htmlString,htmlArg fold
-syn region vueTag contained start=+</+ end=+>+ contains=htmlTagN,htmlString,htmlArg
-" syn keyword vueTagName containedin=htmlTagN template script style
+syntax region vueTag fold
+      \ start=+^<[^/]+ end=+>+ skip=+></+
+      \ contained contains=htmlTagN,htmlString,htmlArg
+syntax region vueTag 
+      \ start=+^</+ end=+>+
+      \ contained contains=htmlTagN,htmlString,htmlArg
 
-" Vue attributes should color as JS.  Note the trivial end pattern; we let
-" jsBlock take care of ending the region.
-syn region xmlString 
-      \ start=+{+ end=++  
-      \ contained contains=jsBlock,javascriptBlock
+highlight default link vueTag htmlTag
+highlight default link cssUnitDecorators2 Number
+highlight default link cssKeyFrameProp2 Constant
+"}}}
 
-hi def link vueTag htmlTag
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax patch {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Patch 7.4.1142
+if has("patch-7.4-1142")
+  if has("win32")
+    syntax iskeyword @,48-57,_,128-167,224-235,$,-
+  else
+    syntax iskeyword @,48-57,_,192-255,$,-
+  endif
+else
+  setlocal iskeyword+=-
+endif
+
+" Style
+" Redefine (less|sass)Definition to highlight <style> correctly and 
+" enable emmet-vim css type.
+if s:use_less
+  silent! syntax clear lessDefinition
+  syntax region cssLessDefinition matchgroup=cssBraces contains=@LessSyntax 
+        \ contained containedin=cssLessVueStyle
+        \ start="{" end="}" 
+endif
+if s:use_sass
+  silent! syntax clear sassDefinition
+  syntax region cssSassDefinition matchgroup=cssBraces contains=@SassSyntax 
+        \ contained containedin=cssSassVueStyle,cssScssVueStyle
+        \ start="{" end="}" 
+endif
+
+" Avoid css syntax interference
+silent! syntax clear cssUnitDecorators
+" Have to use a different name
+syntax match cssUnitDecorators2 
+      \ /\(#\|-\|+\|%\|mm\|cm\|in\|pt\|pc\|em\|ex\|px\|ch\|rem\|vh\|vw\|vmin\|vmax\|dpi\|dppx\|dpcm\|Hz\|kHz\|s\|ms\|deg\|grad\|rad\)\ze\(;\|$\)/
+      \ contained
+      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute
+
+silent! syntax clear cssKeyFrameProp
+syn match cssKeyFrameProp2 /\d*%\|from\|to/ 
+      \ contained nextgroup=cssDefinition
+      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute
+
+" Coffee
+if s:use_coffee
+  silent! syntax clear coffeeConstant
+  syn match coffeeConstant '\v<\u\C[A-Z0-9_]+>' display 
+        \ containedin=@coffeeIdentifier
+endif
+
+" JavaScript
+" Number with minus
+syntax match javaScriptNumber '\v<-?\d+L?>|0[xX][0-9a-fA-F]+>' 
+      \ containedin=@javascriptVueScript display
+
+" HTML
+" Clear htmlHead that may cause highlighting out of bounds
+silent! syntax clear htmlHead
+
+" html5 data-*
+syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@HTMLSyntax
+"}}}
+
+let b:current_syntax = 'vue'
+" vim: fdm=marker