Remove optional function argument

.travis.yml

@@ -1,7 +1,9 @@
+dist: focal
+
 language: minimal
 
 install:
-  - git clone --depth=1 https://github.com/leafOfTree/test ../test
+  - git clone https://github.com/leafOfTree/test ../test --depth=1 
 
   - git clone https://github.com/digitaltoad/vim-pug ../vim-pug --depth=1
   - git clone https://github.com/kchmck/vim-coffee-script ../vim-coffee-script --depth=1

README.md

@@ -35,7 +35,7 @@ Vim syntax and indent plugin for `.vue` files. Mainly inspired by [mxw/vim-jsx][
 <br />
 </details>
 
-This plugin works if `filetype` is set to `vue`. Please stay up to date. Feel free to open an issue or pull request.
+This plugin works if it has set `filetype` to `vue`. Please stay up to date. Feel free to open an issue or pull request.
 
 ## How it works
 
@@ -43,61 +43,119 @@ Since `.vue` is a combination of CSS, HTML and JavaScript, so is `vim-vue-plugin
 
 Supports
 
-- Vue directives.
+- Vue attribute(directive) and keyword.^
 - Less/Sass/Scss, Pug with [vim-pug][4], Coffee with [vim-coffee-script][11], TypeScript with [typescript-vim][14] or [yats.vim][15], Stylus with [vim-stylus][16]. ^
+
+    Relative plugins need to be installed.
+
 - A builtin `foldexpr` foldmethod.^
 - [emmet-vim][10] HTML/CSS/JavaScript filetype detection.
 - `.wpy` files from [WePY][6].
 
-^: see Configuration for details. Relative plugins need to be installed.
+^: see Configuration for details. 
 
 ## Configuration
 
 Set global variable to `1` to enable or `0` to disable. Ex:
 
+```vim
 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.<br> Disable: only in `$VIMRUNTIME/syntax`, `~/.vim/syntax` and `$VIM/vimfiles/syntax` | 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_typescript`     | Enable typescript syntax for `<script lang="ts">`.                                                     | 0 |
 | `g:vim_vue_plugin_use_less`           | Enable less syntax for `<style lang="less">`.                                                          | 0 |
-| `g:vim_vue_plugin_use_sass`           | Enable scss/sass syntax for `<style lang="scss|sass">`.                               | 0 |
+| `g:vim_vue_plugin_use_sass`           | Enable sass syntax for `<style lang="scss\|sass">`.                               | 0 |
+| `g:vim_vue_plugin_use_scss`           | Enable scss syntax for `<style lang="scss">`.                               | 0 |
 | `g:vim_vue_plugin_use_stylus`         | Enable stylus syntax for `<style lang="stylus">`.                                                      | 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_has_init_indent`    | Initially indent one tab inside `style/script` tags.                                                   | 0+ |
 | `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_highlight_vue_keyword` | Highlight vue keyword like `data`, `methods`, ...                       | 0 |
+| `g:vim_vue_plugin_use_foldexpr`\#     | Enable builtin `foldexpr` foldmethod.                                                                  | 0 |
+| `g:vim_vue_plugin_custom_blocks`      | Highlight custom blocks. See details below.                                                            | {} |
 | `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 can be added in `~/.vim/syntax` or `$VIM/vimfiles/syntax`. 
 
+\#: In the case when it's enabled, the `foldexpr` is not efficient for large files, so it's not enabled initially when the line number exceeds `1000`. You can enable it mannully by `setlocal foldmethod=expr` when required.
+
+\+: 0 for `.vue` and 1 for `.wpy`
+
 **Note**
 
-- `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` currently applies to `HTML/Sass/Less`.
+- `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
+## Custom blocks
 
-As there are more than one language in `.vue` file, the different behaviors like mapping or completion may be expected under different tags.
+You can enable highlighting in a custom block by setting `g:vim_vue_plugin_custom_blocks`. 
 
-This plugin provides a function to get the tag where the cursor is in.
-
-- `GetVueTag() => String` Return value is `'template'`, `'script'` or `'style'`.
+The structure is `{ block: filetype }` or `{ block: filetype[] }`. When providing a filetype list, you need to add `lang="..."` in the tag. Otherwise, the first one will be used.
 
 ### Example
 
 ```vim
+let g:vim_vue_plugin_custom_blocks = { 
+      \'docs': 'markdown',
+      \'i18n': ['json', 'yaml', 'json5'],
+      \}
+```
+
+Should highlight custom blocks in `.vue` such as
+
+```vue
+<docs>
+# This is the documentation for component.
+</docs>
+
+<i18n lang="yaml">
+en:
+  hello: "Hello World!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>
+```
+
+## 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 one of `'template', 'script', 'style'`.
+
+    ```vim
+    " Example
     autocmd FileType vue inoremap <buffer><expr> : InsertColon()
 
     function! InsertColon()
       let tag = GetVueTag()
+      return tag == 'template' ? ':' : ': '
+    endfunction
+    ```
 
-  if tag == 'template'
-    return ':'
+- `GetVueSubtype() => String` Return value is one of `'html', 'javascript', 'css', 'scss', ...`.
+
+- `OnChangeVueSubtype(subtype)` An event listener that is called when subtype changes.
+
+    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.
+
+    ```vim
+    " Example: 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
-    return ': '
+        setlocal commentstring=//%s
+        setlocal comments=sO:*\ -,mO:*\ \ ,exO:*/,s1:/*,mb:*,ex:*/,://
       endif
     endfunction
     ```
@@ -112,6 +170,7 @@ Since there are many sub languages included, most delays come from syntax files
 
 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
 
+`$VIMRUNTIME/syntax/sass.vim`
 ```diff
 - runtime! syntax/css.vim
 + if !exists("b:current_loading_main_syntax")
@@ -119,6 +178,15 @@ For example, the builtin syntax `sass.vim` and `less.vim` in vim8.1 runtime and
 + endif
 ```
 
+`$VIMRUNTIME/syntax/vue.vim`
+```diff
+-   runtime! syntax/html.vim
++ if !exists("b:current_loading_main_syntax")
++   runtime! syntax/html.vim
++ endif
+```
+
+
 ## Acknowledgments & Refs
 
 - [mxw/vim-jsx][1]
@@ -140,7 +208,7 @@ This plugin is under [The Unlicense][8]. Other than this, `lib/indent/*` files a
 [3]: https://vuejs.org/v2/guide/single-file-components.html
 [4]: https://github.com/digitaltoad/vim-pug
 [5]: https://github.com/tpope/vim-pathogen
-[6]: https://tencent.github.io/wepy
+[6]: https://github.com/Tencent/wepy
 [7]: https://github.com/junegunn/vim-plug
 [8]: https://choosealicense.com/licenses/unlicense/
 [9]: https://github.com/leafOfTree/vim-svelte-plugin

_config.yml

@@ -1,3 +1,4 @@
 theme: jekyll-theme-cayman
 markdown: CommonMarkGhPages
-extensins: ["table"]
+commonmark: 
+  extensions: ["table"]

autoload/vue.vim

@@ -1,9 +1,116 @@
+" Since vue#Log and vue#GetConfig are always called 
+" in syntax and indent files,
+" this file will be sourced when opening the first vue file
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+function! s:GetConfig(name, default)
+  let name = 'g:vim_vue_plugin_'.a:name
+  return exists(name) ? eval(name) : a:default
+endfunction
+
 let s:name = 'vim-vue-plugin'
-let s:debug = exists("g:vim_vue_plugin_debug")
-      \ && g:vim_vue_plugin_debug == 1
+let s:load_full_syntax = s:GetConfig("load_full_syntax", 0)
+let s:debug = s:GetConfig("debug", 0)
 
 function! vue#Log(msg)
   if s:debug
     echom '['.s:name.']['.v:lnum.'] '.a:msg
   endif
 endfunction
+
+function! vue#GetConfig(name, default)
+  return s:GetConfig(a:name, a:default)
+endfunction
+
+if exists('##CursorMoved') && exists('*OnChangeVueSubtype')
+  augroup vim_vue_plugin
+    autocmd!
+    autocmd CursorMoved,CursorMovedI,WinEnter *.vue,*.wpy
+          \ call s:CheckSubtype()
+  augroup END
+
+  let s:subtype = ''
+  function! s:CheckSubtype()
+    let subtype = GetVueSubtype()
+
+    if s:subtype != subtype
+      call OnChangeVueSubtype(subtype)
+      let s:subtype = subtype
+    endif
+  endfunction
+endif
+
+function! s:SynsEOL(lnum)
+  let lnum = prevnonblank(a:lnum)
+  let cnum = strlen(getline(lnum))
+  return map(synstack(lnum, cnum), 'synIDattr(v:val, "name")')
+endfunction
+
+function! GetVueSubtype()
+  let lnum = line('.')
+  let cursyns = s:SynsEOL(lnum)
+  let syn = !empty(cursyns) ? get(cursyns, 0, '') : ''
+
+  let subtype = matchstr(syn, '\w\+\zeVue')
+  if subtype =~ 'css\w\+'
+    let subtype = subtype[3:]
+  endif
+  let subtype = tolower(subtype)
+  return subtype
+endfunction
+
+function! GetVueTag(...)
+  let lnum = a:0 > 0 ? a:1 : line('.')
+  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
+
+function! vue#LoadSyntax(group, type)
+  if s:load_full_syntax
+    call vue#LoadFullSyntax(a:group, a:type)
+  else
+    call vue#LoadDefaultSyntax(a:group, a:type)
+  endif
+endfunction
+
+function! vue#LoadDefaultSyntax(group, type)
+  unlet! b:current_syntax
+  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
+
+" Load all syntax files in 'runtimepath'
+" Useful if there is no default syntax file provided by vim
+function! vue#LoadFullSyntax(group, type)
+  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
+
+    " Avoid overload of `javascript.vim`
+    let b:current_syntax = 'vue'
+  else
+    unlet! b:current_syntax
+  endif
+endfunction
+"}}}

ftdetect/vue.vim

@@ -1 +1 @@
-autocmd BufNewFile,BufRead *.vue,*.wpy set filetype=vue 
+autocmd BufNewFile,BufRead *.vue,*.wpy setf vue

ftplugin/vue/fold.vim

@@ -3,8 +3,7 @@
 " Config {{{
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-let s:use_foldexpr = exists("g:vim_vue_plugin_use_foldexpr")
-      \ && g:vim_vue_plugin_use_foldexpr == 1
+let s:use_foldexpr = vue#GetConfig("use_foldexpr", 0)
 "}}}
 
 if !s:use_foldexpr | finish | endif
@@ -14,7 +13,9 @@ if !s:use_foldexpr | finish | endif
 " Settings {{{
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+if line('$') < 1000
   setlocal foldmethod=expr
+endif
 setlocal foldexpr=GetVueFold(v:lnum)
 "}}}
 

indent/vue-custom-blocks.vim

@@ -0,0 +1,45 @@
+if exists("b:did_indent")
+  finish
+endif
+
+let s:custom_blocks = vue#GetConfig("custom_blocks", {})
+let s:indent = {}
+
+function! s:GetSyntaxList()
+  let syntax_list = []
+  for syntax in values(s:custom_blocks)
+    let type = type(syntax)
+    if type == v:t_string
+      if !count(syntax_list, syntax)
+        call add(syntax_list, syntax)
+      endif
+    elseif type == v:t_list && len(syntax)
+      for syn in syntax
+        if !count(syntax_list, syn)
+          call add(syntax_list, syn)
+        endif
+      endfor
+    else
+      echoerr '[vim-vue-plugin] custom_blocks value type'
+            \.' must be either string or list'
+    endif
+  endfor
+  return syntax_list
+endfunction
+
+function! s:GetIndentExpr(syntax_list)
+  for syntax in a:syntax_list
+    unlet! b:did_indent
+    execute 'runtime indent/'.syntax.'.vim'
+    let s:indent[syntax] = &l:indentexpr
+  endfor
+endfunction
+
+function! GetVueCustomBlocksIndent(syn)
+  let syntax = matchstr(a:syn, '^\l\+')
+  call vue#Log('custom block syntax: '.syntax)
+  let ind = eval(s:indent[syntax])
+  return ind
+endfunction
+
+call s:GetIndentExpr(s:GetSyntaxList())

indent/vue.vim

@@ -11,6 +11,23 @@ if exists("b:did_indent")
   finish
 endif
 
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:use_pug = vue#GetConfig("use_pug", 0)
+let s:use_sass = vue#GetConfig("use_sass", 0)
+let s:use_scss = vue#GetConfig("use_scss", 0)
+let s:use_stylus = vue#GetConfig("use_stylus", 0)
+let s:use_coffee = vue#GetConfig("use_coffee", 0)
+let s:use_typescript = vue#GetConfig("use_typescript", 0)
+let s:has_init_indent = vue#GetConfig("has_init_indent",
+      \ expand("%:e") == 'wpy' ? 1 : 0)
+let s:custom_blocks = vue#GetConfig("custom_blocks", {})
+let s:use_custom_blocks = !empty(s:custom_blocks)
+"}}}
+
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Variables {{{
@@ -25,34 +42,9 @@ 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_start = '\v^\s*\<\w*'
-let s:tag_end = '\v^\s*\/?\>\s*'
-"}}}
+let s:tag_end = '\v^\s*\/?\>\s*' " />
+let s:full_tag_end = '\v^\s*\<\/' " </...>
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-"
-" 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:use_stylus = exists("g:vim_vue_plugin_use_stylus")
-      \ && g:vim_vue_plugin_use_stylus == 1
-let s:use_coffee = exists("g:vim_vue_plugin_use_coffee")
-      \ && g:vim_vue_plugin_use_coffee == 1
-let s:use_typescript = exists("g:vim_vue_plugin_use_typescript")
-      \ && g:vim_vue_plugin_use_typescript == 1
-
-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
 "}}}
 
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
@@ -60,6 +52,9 @@ endif
 " Load indent method {{{
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Save shiftwidth
+let s:sw = &sw
+
 " Use lib/indent/ files for compatibility
 unlet! b:did_indent
 runtime lib/indent/xml.vim
@@ -72,6 +67,12 @@ unlet! b:did_indent
 runtime! indent/javascript.vim
 let b:javascript_indentexpr = &indentexpr
 
+if s:use_custom_blocks
+  unlet! b:did_indent
+  runtime indent/vue-custom-blocks.vim
+  let s:vue_custom_blocks_tag = '<\/\?'.join(keys(s:custom_blocks), '\|')
+endif
+
 if s:use_pug
   unlet! b:did_indent
   let s:save_formatoptions = &formatoptions
@@ -84,6 +85,11 @@ if s:use_sass
   runtime! indent/sass.vim
 endif
 
+if s:use_scss
+  unlet! b:did_indent
+  runtime! indent/scss.vim
+endif
+
 if s:use_stylus
   unlet! b:did_indent
   runtime! indent/stylus.vim
@@ -98,6 +104,9 @@ if s:use_typescript
   unlet! b:did_indent
   runtime! indent/typescript.vim
 endif
+
+" Recover shiftwidth
+let &sw = s:sw
 "}}}
 
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
@@ -105,7 +114,6 @@ endif
 " Settings {{{
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-setlocal sw=2 ts=2
 " JavaScript indentkeys
 setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,:
 " XML indentkeys
@@ -119,17 +127,95 @@ setlocal indentexpr=GetVueIndent()
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 function! GetVueIndent()
+  let ind = s:GetIndentBySyntax()
+  let ind = s:AdjustIndent(ind)
+  call vue#Log('indent: '.ind)
+  return ind
+endfunction
+
+function! s:GetIndentBySyntax()
   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 cursyns = s:SynsEOL(v:lnum)
-  let cursyn = get(cursyns, 0, '')
+  let cursyn = get(s:SynsEOL(v:lnum), 0, '')
 
   if s:SynHTML(cursyn)
     call vue#Log('syntax: html')
+    let ind = s:GetHTMLIndent(prevlnum, prevline, curline)
+  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:SynTypeScript(cursyn)
+    call vue#Log('syntax: typescript')
+    let ind = GetTypescriptIndent()
+  elseif s:SynSASS(cursyn)
+    call vue#Log('syntax: sass')
+    let ind = GetSassIndent()
+  elseif s:SynSCSS(cursyn)
+    call vue#Log('syntax: scss')
+    if exists('*GetSCSSIndent')
+      call vue#Log('indent: scss')
+      let ind = GetSCSSIndent()
+    else
+      call vue#Log('indent: css')
+      let ind = GetCSSIndent()
+    endif
+  elseif s:SynStylus(cursyn)
+    call vue#Log('syntax: stylus')
+    let ind = GetStylusIndent()
+  elseif s:SynStyle(cursyn)
+    call vue#Log('syntax: css')
+    let ind = GetCSSIndent()
+  elseif s:use_custom_blocks && s:SynCustomBlocks(cursyn)
+    call vue#Log('syntax: custom blocks')
+    let ind = GetVueCustomBlocksIndent(cursyn)
+  else
+    " Default to JavaScript indent
+    call vue#Log('syntax: javascript')
+    if len(b:javascript_indentexpr)
+      let ind = eval(b:javascript_indentexpr)
+    else
+      let ind = cindent(v:lnum)
+    endif
+  endif
+  return ind
+endfunction
+
+function! s:AdjustIndent(ind)
+  let ind = a:ind
+  let prevline = getline(prevnonblank(v:lnum - 1))
+  let curline = getline(v:lnum)
+  let cursyn = get(s:SynsEOL(v:lnum), 0, '')
+
+  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 && ind < 1 && s:SynVueScriptOrStyle(cursyn) 
+      call vue#Log('add initial indent')
+      let ind = &sw
+  elseif getline(s:PrevNonBlacnkNonComment(v:lnum)) =~? s:vue_tag_start
+    call vue#Log('previous line is vue tag start')
+    let ind = 0
+  elseif s:use_custom_blocks && curline =~ s:vue_custom_blocks_tag
+    call vue#Log('current line is vue custom blocks tag')
+    let ind = 0
+  endif
+
+  return ind
+endfunction
+
+function! s:GetHTMLIndent(prevlnum, prevline, curline)
+  let prevlnum = a:prevlnum
+  let prevline = a:prevline
+  let curline = a:curline
+
   let ind = XmlIndentGet(v:lnum, 0)
   if prevline =~? s:empty_tag
     call vue#Log('previous line is an empty tag')
@@ -148,57 +234,13 @@ function! GetVueIndent()
     let [start, end] = s:PrevMultilineEmptyTag(v:lnum)
     if end == prevlnum
       call vue#Log('previous line is a multiline empty tag')
+      if curline =~? s:full_tag_end 
+        let ind = indent(v:lnum - 1) - &sw
+      else
         let ind = indent(v:lnum - 1)
       endif
     endif
-  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:SynTypeScript(cursyn)
-    call vue#Log('syntax: typescript')
-    let ind = GetTypescriptIndent()
-  elseif s:SynSASS(cursyn)
-    call vue#Log('syntax: sass')
-    let ind = GetSassIndent()
-  elseif s:SynStylus(cursyn)
-    call vue#Log('syntax: stylus')
-    let ind = GetStylusIndent()
-  elseif s:SynStyle(cursyn)
-    call vue#Log('syntax: style')
-    let ind = GetCSSIndent()
-  else
-    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_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 s:SynVueScriptOrStyle(cursyn) && ind < 1
-      call vue#Log('add initial indent')
-      let ind = &sw
-    endif
-  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 vue#Log('indent: '.ind)
   return ind
 endfunction
 
@@ -228,6 +270,10 @@ function! s:SynSASS(syn)
   return a:syn ==? 'sassVueStyle'
 endfunction
 
+function! s:SynSCSS(syn)
+  return a:syn ==? 'cssScssVueStyle'
+endfunction
+
 function! s:SynStylus(syn)
   return a:syn ==? 'cssStylusVueStyle'
 endfunction
@@ -236,6 +282,10 @@ function! s:SynStyle(syn)
   return a:syn =~? 'VueStyle'
 endfunction
 
+function! s:SynCustomBlocks(syn)
+  return a:syn =~? 'Block'
+endfunction
+
 function! s:SynVueScriptOrStyle(syn)
   return a:syn =~? '\v(VueStyle)|(VueScript)'
 endfunction
@@ -263,7 +313,7 @@ function! s:PrevMultilineEmptyTag(lnum)
 endfunction
 
 function! s:PrevNonBlacnkNonComment(lnum)
-  let curline = getline(lnum)
+  let curline = getline(a:lnum)
   let cursyns = s:SynsEOL(a:lnum)
   let cursyn = get(cursyns, 1, '')
   if cursyn =~? 'comment' && !empty(curline)
@@ -282,28 +332,6 @@ function! s:PrevNonBlacnkNonComment(lnum)
   endwhile
   return prevlnum
 endfunction
-
-function! GetVueTag(...)
-  if a:0 > 0
-    let lnum = a:1
-  else
-    let lnum = getcurpos()[1]
-  endif
-  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

syntax/vue-custom-blocks.vim

@@ -0,0 +1,64 @@
+let s:custom_blocks = vue#GetConfig("custom_blocks", {})
+
+if empty(s:custom_blocks) 
+  finish
+endif
+
+function! s:LoadSyntax()
+  let syntax_list = []
+  for syntax in values(s:custom_blocks)
+    let type = type(syntax)
+    if type == v:t_string
+      if !count(syntax_list, syntax)
+        call add(syntax_list, syntax)
+      endif
+    elseif type == v:t_list && len(syntax)
+      for syn in syntax
+        if !count(syntax_list, syn)
+          call add(syntax_list, syn)
+        endif
+      endfor
+    else
+      echoerr '[vim-vue-plugin] custom_blocks value type'
+            \.' must be either string or list'
+    endif
+  endfor
+  for syntax in syntax_list
+    let syntaxGroup = '@'.syntax
+    call vue#LoadFullSyntax(syntaxGroup, syntax)
+  endfor
+endfunction
+
+function! s:SetSyntax(block, syntax, lang)
+  let block = a:block
+  let syntax = a:syntax
+  let lang = a:lang
+
+  let region_name = syntax.toupper(block[0]).block[1:].'Block'
+  let syntax_lang = lang ? 'lang=["'']'.syntax.'["''][^>]*' : ''
+  let start = '<'.block.'[^>]*'.syntax_lang.'>'
+  let end = '</'.block.'>'
+  let syntaxGroup = '@'.syntax
+
+  execute 'syntax region '.region_name.' fold matchgroup=vueTag'
+        \.' start=+'.start.'+'
+        \.' end=+'.end.'+'
+        \.' keepend contains='.syntaxGroup
+endfunction
+
+function! s:Highlight()
+  for [block, syntax] in items(s:custom_blocks)
+    let type = type(syntax)
+    if type == v:t_string
+      call s:SetSyntax(block, syntax, 0)
+    elseif type == v:t_list && len(syntax)
+      call s:SetSyntax(block, syntax[0], 0)
+      for syn in syntax
+        call s:SetSyntax(block, syn, 1)
+      endfor
+    endif
+  endfor
+endfunction
+
+call s:LoadSyntax()
+call s:Highlight()

syntax/vue-html.vim

@@ -1,20 +1,21 @@
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Config {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-let s:highlight_vue_attr = exists("g:vim_vue_plugin_highlight_vue_attr")
-      \ && g:vim_vue_plugin_highlight_vue_attr == 1
-")}}}
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:highlight_vue_attr = vue#GetConfig("highlight_vue_attr", 0)
+"}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Syntax highlight {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Use syn-match in order to highlight both transition and transition-group
+" according to syn-priority
+syntax match VueComponentName containedin=htmlTagN '\v(component|slot|transition)' 
 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
@@ -29,7 +30,7 @@ syntax region VueQuote contained
 syntax match VueInject contained '\v\$\w*'
 
 syntax region VueExpression 
-      \ containedin=html.*
+      \ containedin=ALLBUT,htmlComment
       \ matchgroup=VueBrace
       \ transparent
       \ start="{{"
@@ -41,6 +42,9 @@ syntax region VueExpression
       \ start="{{"
       \ end="}}"
 
+" Transition attributes
+syntax match htmlArg contained "\<\(enter-from-class\|enter-active-class\|enter-to-class\|leave-from-class\|leave-active-class\|leave-to-class\)\>"
+
 " Wepy directive syntax
 syntax match VueAttr '\v(\S)@<!wx[^\=]+(\=\"[^"]*\")?'
       \ containedin=htmlTag  

syntax/vue-javascript.vim

@@ -0,0 +1,75 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:highlight_vue_keyword = vue#GetConfig("highlight_vue_keyword", 0)
+if !s:highlight_vue_keyword | finish | endif
+
+let s:has_init_indent = vue#GetConfig("has_init_indent",
+      \ expand("%:e") == 'wpy' ? 1 : 0)
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax highlight {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:vue_keywords = 'name parent functional delimiters comments components directives filters extends mixins inheritAttrs model props propsData data computed watch methods template render renderError inject provide beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed setup beforeUnmount unmounted errorCaptured renderTracked renderTriggered'
+
+let s:indent = &sw * (1 + s:has_init_indent)
+let s:keywords_regexp = '\v^\s{'.s:indent.'}(async )?<('
+      \.join(split(s:vue_keywords, ' '), '|')
+      \.')\ze'
+
+" Currently support https://github.com/pangloss/vim-javascript
+let s:useJavaScriptPlugin = hlexists('jsAsyncKeyword')
+let s:containedin = s:useJavaScriptPlugin
+      \? 'jsObject,jsFuncBlock,@jsExpression' 
+      \: 'javascriptVueScript' 
+let s:contains = s:useJavaScriptPlugin
+      \? 'jsAsyncKeyword' 
+      \: 'javaScriptReserved' 
+let s:match_option = 
+      \' containedin='.s:containedin
+      \.' contains='.s:contains
+      \.' skipwhite skipempty'
+
+execute 'syntax match vueObjectKey /'
+      \.s:keywords_regexp
+      \.'\s*:/'
+      \.s:match_option
+      \.' nextgroup=jsObjectValue'
+
+execute 'syntax match vueObjectFuncName /'
+      \.s:keywords_regexp
+      \.'\_s*\(/'
+      \.s:match_option
+      \.' nextgroup=jsFuncArgs'
+
+execute 'syntax match vueObjectFuncKey /'
+      \.s:keywords_regexp
+      \.'\s*:\s*function>/'
+      \.s:match_option
+      \.' nextgroup=jsFuncArgs'
+
+let s:vue3_keywords = 'ref reactive toRefs watch computed'.
+      \' onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount'.
+      \' onUnmounted onErrorCaptured onRenderTracked onRenderTriggered'.
+      \' getCurrentInstance'
+let s:vue3_keywords_regexp = '\v<('
+      \.join(split(s:vue3_keywords, ' '), '|')
+      \.')\ze'
+
+execute 'syntax match vue3Keyword /'
+      \.s:vue3_keywords_regexp
+      \.'\_s*\(/'
+      \.s:match_option
+
+highlight default link vueObjectKey vueObjectKeyword
+highlight default link vueObjectFuncName vueObjectKeyword
+highlight default link vue3Keyword vueObjectKeyword
+highlight default link vueObjectFuncKey vueObjectKeyword
+highlight default link vueObjectKeyword Type
+"}}}
+" vim: fdm=marker

syntax/vue.vim

@@ -1,4 +1,4 @@
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Vim syntax file
 "
 " Language: Vue
@@ -6,158 +6,117 @@
 "
 " CREDITS: Inspired by mxw/vim-jsx.
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 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")
-      \ && g:vim_vue_plugin_use_pug == 1
-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_stylus = exists("g:vim_vue_plugin_use_stylus")
-      \ && g:vim_vue_plugin_use_stylus == 1
-let s:use_coffee = exists("g:vim_vue_plugin_use_coffee")
-      \ && g:vim_vue_plugin_use_coffee == 1
-let s:use_typescript = exists("g:vim_vue_plugin_use_typescript")
-      \ && g:vim_vue_plugin_use_typescript == 1
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:use_pug = vue#GetConfig("use_pug", 0)
+let s:use_less = vue#GetConfig("use_less", 0)
+let s:use_sass = vue#GetConfig("use_sass", 0)
+let s:use_scss = vue#GetConfig("use_scss", 0)
+let s:use_stylus = vue#GetConfig("use_stylus", 0)
+let s:use_coffee = vue#GetConfig("use_coffee", 0)
+let s:use_typescript = vue#GetConfig("use_typescript", 0)
 "}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-"
-" Functions {{{
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-function! s:LoadSyntax(group, type)
-  if s:load_full_syntax
-    call s:LoadFullSyntax(a:group, a:type)
-  else
-    call s:LoadDefaultSyntax(a:group, a:type)
-  endif
-endfunction
-
-function! s:LoadDefaultSyntax(group, type)
-  unlet! b:current_syntax
-  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
-
-" Load all syntax files in 'runtimepath'
-" Useful if there is no default syntax file provided by vim
-function! s:LoadFullSyntax(group, type)
-  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
-
-    " Avoid overload of `javascript.vim`
-    let b:current_syntax = 'vue'
-  else
-    unlet! b:current_syntax
-  endif
-endfunction
-"}}}
-
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Load main syntax {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
 " Load syntax/html.vim to syntax group, which loads full JavaScript and CSS
-" syntax. It defines group htmlJavaScript and htmlCss.
-call s:LoadSyntax('@HTMLSyntax', 'html')
+" syntax. It defines group @html, @htmlJavaScript, and @htmlCss.
+call vue#LoadSyntax('@html', 'html')
+
+" Avoid overload
+if !hlexists('cssTagName')
+  call vue#LoadSyntax('@htmlCss', 'css')
+endif
+
+" Avoid overload
+if !hlexists('javaScriptComment')
+  call vue#Log('load javascript cluster')
+  call vue#LoadSyntax('@htmlJavaScript', 'javascript')
+endif
 
 " Load vue-html syntax
 runtime syntax/vue-html.vim
 
-" Avoid overload.
-if hlexists('cssTagName') == 0
-  call s:LoadSyntax('@htmlCss', 'css')
-endif
-
-" Avoid overload
-if hlexists('javaScriptComment') == 0
-  call vue#Log('load javascript cluster')
-  call s:LoadSyntax('@htmlJavaScript', 'javascript')
-endif
+" Load vue-javascript syntax
+runtime syntax/vue-javascript.vim
 "}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Load pre-processors syntax {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " If pug is enabled, load vim-pug syntax
 if s:use_pug
-  call s:LoadFullSyntax('@PugSyntax', 'pug')
+  call vue#LoadFullSyntax('@PugSyntax', 'pug')
   syn cluster htmlJavascript remove=javascriptParenthesisBlock
 endif
 
 " If less is enabled, load less syntax 
 if s:use_less
-  call s:LoadSyntax('@LessSyntax', 'less')
+  call vue#LoadSyntax('@LessSyntax', 'less')
   runtime! after/syntax/less.vim
 endif
 
 " If sass is enabled, load sass syntax 
 if s:use_sass
-  call s:LoadSyntax('@SassSyntax', 'sass')
+  call vue#LoadSyntax('@SassSyntax', 'sass')
   runtime! after/syntax/sass.vim
 endif
 
+" If scss is enabled, load sass syntax 
+if s:use_scss
+  call vue#LoadSyntax('@ScssSyntax', 'scss')
+  runtime! after/syntax/scss.vim
+endif
+
 " If stylus is enabled, load stylus syntax 
 if s:use_stylus
-  call s:LoadFullSyntax('@StylusSyntax', 'stylus')
+  call vue#LoadFullSyntax('@StylusSyntax', 'stylus')
   runtime! after/syntax/stylus.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')
+  call vue#LoadFullSyntax('@htmlCoffeeScript', 'coffee')
 endif
 
 " If TypeScript is enabled, load the syntax.
 if s:use_typescript
-  call s:LoadFullSyntax('@TypeScript', 'typescript')
+  call vue#LoadFullSyntax('@TypeScript', 'typescript')
 endif
 "}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " 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
+      \ keepend contains=@html
 " When template code is not well indented
 syntax region htmlVueTemplate fold
       \ start=+<template[^>]*>+
       \ end=+</template>\ze\n\(^$\n\)*<\(script\|style\)+
-      \ keepend contains=@HTMLSyntax
+      \ keepend contains=@html
 
 syntax region javascriptVueScript fold 
       \ start=+<script[^>]*>+
@@ -194,10 +153,19 @@ syntax region sassVueStyle fold
       \ start=+<style[^>]*lang=["']sass["'][^>]*>+
       \ end=+</style>+
       \ keepend contains=@SassSyntax,vueTag
+syntax region cssScssVueStyle fold
+      \ start=+<style[^>]*lang=["']scss["'][^>]*>+
+      \ end=+</style>+
+      \ keepend contains=@ScssSyntax,vueTag
+
+" Backward compatiable for `use_sass` option
+if s:use_sass && !s:use_scss
   syntax region cssScssVueStyle fold
         \ start=+<style[^>]*lang=["']scss["'][^>]*>+
         \ end=+</style>+
         \ keepend contains=@SassSyntax,vueTag
+endif
+
 syntax region cssStylusVueStyle fold
       \ start=+<style[^>]*lang=["']stylus["'][^>]*>+
       \ end=+</style>+
@@ -213,14 +181,21 @@ syntax region vueTag
 highlight default link vueTag htmlTag
 highlight default link cssUnitDecorators2 Number
 highlight default link cssKeyFrameProp2 Constant
-
 "}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Custom blocks {{{
+"
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+runtime syntax/vue-custom-blocks.vim
+"}}}
+
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Syntax patch {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Patch 7.4.1142
 if has("patch-7.4-1142")
   if has("win32")
@@ -237,26 +212,46 @@ endif
 " enable emmet-vim css type.
 if s:use_less
   silent! syntax clear lessDefinition
-  syntax region cssLessDefinition matchgroup=cssBraces contains=@LessSyntax 
+  syntax region cssLessDefinition matchgroup=cssBraces 
+        \ contains=@LessSyntax,cssLessDefinition 
         \ contained containedin=cssLessVueStyle
         \ start="{" end="}" 
 endif
 if s:use_sass
   silent! syntax clear sassDefinition
-  syntax region cssSassDefinition matchgroup=cssBraces contains=@SassSyntax 
-        \ contained containedin=sassVueStyle,cssScssVueStyle
+  syntax region sassDefinition matchgroup=cssBraces 
+        \ contains=@SassSyntax,sassDefinition 
+        \ contained containedin=sassVueStyle
         \ start="{" end="}" 
+
+  " Extend to highlight all numbers in expression
+  syntax match cssValueNumber
+        \ /\W\zs\d\+\(\.\d\+\)\?%\?\ze\W/
+        \ contained containedin=sassDefinition
+endif
+" If not loading https://github.com/cakebaker/scss-syntax.vim
+if s:use_scss && !hlexists('scssNestedProperty')
+  silent! syntax clear scssDefinition
+  syntax region cssScssDefinition transparent matchgroup=cssBraces 
+        \ contains=@ScssSyntax,cssScssDefinition
+        \ contained containedin=cssScssVueStyle
+        \ start="{" end="}" 
+
+  " Extend to highlight all numbers in expression
+  syntax match cssValueNumber
+        \ /\W\zs\d\+\(\.\d\+\)\?%\?\ze\W/
+        \ contained containedin=cssScssDefinition
 endif
 if s:use_stylus
   silent! syntax clear stylusDefinition
-  syntax region cssStylusDefinition matchgroup=cssBraces contains=@StylusSyntax 
+  syntax region cssStylusDefinition matchgroup=cssBraces 
+        \ contains=@StylusSyntax,cssStylusDefinition
         \ contained containedin=cssStylusVueStyle
         \ start="{" end="}" 
 endif
 
-" Avoid css syntax interference
+" Use a different name in order to 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
@@ -284,16 +279,16 @@ syntax match javaScriptNumber '\v<-?\d+L?>|0[xX][0-9a-fA-F]+>'
 silent! syntax clear htmlHead
 
 " html5 data-*
-syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@HTMLSyntax
+syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@html
 "}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Syntax sync {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 syntax sync clear
-syntax sync minlines=10
+syntax sync minlines=100
 syntax sync match vueHighlight groupthere NONE "</\(script\|template\|style\)"
 syntax sync match scriptHighlight groupthere javascriptVueScript "<script"
 syntax sync match scriptHighlight groupthere coffeeVueScript "<script[^>]*lang=["']coffee["'][^>]*>"