Remove optional function argument

Add Stylus support

.gitignore

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

.travis.yml

@@ -0,0 +1,14 @@
+dist: focal
+
+language: minimal
+
+install:
+  - 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
+  - git clone https://github.com/leafgarland/typescript-vim ../typescript-vim --depth=1
+  - git clone https://github.com/iloginow/vim-stylus.git ../vim-stylus --depth=1
+
+script:
+  - bash ../test/start.sh vue vim-vue-plugin

README.md

@@ -1,30 +1,41 @@
-# 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="220" />
+</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 it has set `filetype` to `vue`. Please stay up to date. Feel free to open an issue or pull request.
 
 ## How it works
 
@@ -32,50 +43,179 @@ 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 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. 
 
 ## Configuration
 
-Set global variable to `1` to enable or `0` to disable.
+Set global variable to `1` to enable or `0` to disable. Ex:
 
-Ex:
-
-    let g:vim_vue_plugin_load_full_syntax = 1
+```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. 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_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 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_has_init_indent`    | Initially indent one tab inside `style/script` tags.                                                   | 0 for `.vue`. 1 for `.wpy` |
+| `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+ |
+| `g:vim_vue_plugin_highlight_vue_attr` | Highlight vue attribute value as expression instead of string.                                         | 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 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
+\#: 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**
+
+- `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`.
+
+## Custom blocks
+
+You can enable highlighting in a custom block by setting `g:vim_vue_plugin_custom_blocks`. 
+
+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
+    ```
+
+- `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
+        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
+
+`$VIMRUNTIME/syntax/sass.vim`
+```diff
+- runtime! syntax/css.vim
++ if !exists("b:current_loading_main_syntax")
++   runtime! syntax/css.vim
++ endif
+```
+
+`$VIMRUNTIME/syntax/vue.vim`
+```diff
+-   runtime! syntax/html.vim
++ if !exists("b:current_loading_main_syntax")
++   runtime! syntax/html.vim
++ endif
+```
 
-![screenshot](https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-screenshot.png)
 
 ## 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
 [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/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/
+[14]: https://github.com/leafgarland/typescript-vim
+[15]: https://github.com/HerringtonDarkholme/yats.vim
+[16]: https://github.com/iloginow/vim-stylus

_config.yml

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

autoload/vue.vim

@@ -0,0 +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: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
+"}}}

filetype.vim

@@ -1,16 +0,0 @@
-au BufNewFile,BufRead *.vue,*.wpy call s:setFiletype()
-
-function! s:setFiletype()
-  " enable JavaScript autocmds first
-  " let &filetype = 'javascript'
-
-  " 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

ftdetect/vue.vim

@@ -0,0 +1 @@
+autocmd BufNewFile,BufRead *.vue,*.wpy setf vue

ftplugin/vue.vim

@@ -0,0 +1,19 @@
+if exists("b:did_ftplugin") | finish | endif
+let b:did_ftplugin = 1
+
+if !has('nvim')
+  setlocal matchpairs+=<:>
+endif
+
+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,124 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:use_foldexpr = vue#GetConfig("use_foldexpr", 0)
+"}}}
+
+if !s:use_foldexpr | finish | endif
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Settings {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+if line('$') < 1000
+  setlocal foldmethod=expr
+endif
+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
+  if a:lnum > 1
+    let prev_indent = s:IndentLevel(a:lnum - 1)
+  else
+    let prev_indent = 0
+  endif
+  let this_indent = s:IndentLevel(a:lnum)
+  let next_indent = s:IndentLevel(s:NextNonBlankLine(a:lnum))
+
+  if GetVueTag(a:lnum) == 'script'
+    " Handle closing '}'
+    if this_line =~ '\v^\s*},?\s*$'
+      return '<'.prev_indent
+    endif
+
+    " --this
+    " ----next
+    if this_indent < next_indent
+      return '>'.next_indent
+    endif
+
+    " ----this
+    " --next
+    if this_indent >= next_indent 
+      return this_indent
+    endif
+  else
+    " Template or style
+    return this_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-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

@@ -1,154 +1,338 @@
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " 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
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" 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)
+"}}}
 
-let s:name = 'vim-vue-plugin'
-let s:debug = exists("g:vim_vue_plugin_debug")
-      \ && g:vim_vue_plugin_debug == 1
-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
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" 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_start = '\v^\s*\<\w*'
+let s:tag_end = '\v^\s*\/?\>\s*' " />
+let s:full_tag_end = '\v^\s*\<\/' " </...>
 
-" Let <template> handled by HTML indent
-let s:vue_tag = '\v^\<(script|style)' 
+"}}}
 
-let s:vue_end_tag = '\v\<\/(template|script|style)'
-let s:end_tag = '^\s*\/\?>\s*'
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Load indent method {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Save shiftwidth
+let s:sw = &sw
 
-" Save the current JavaScript indentexpr.
-let b:vue_js_indentexpr = &indentexpr
-
-" Load xml 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_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
-  " Load pug indent method
   unlet! b:did_indent
+  let s:save_formatoptions = &formatoptions
   runtime! indent/pug.vim
+  let &formatoptions = s:save_formatoptions
 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_scss
+  unlet! b:did_indent
+  runtime! indent/scss.vim
+endif
 
+if s:use_stylus
+  unlet! b:did_indent
+  runtime! indent/stylus.vim
+endif
+
+if s:use_coffee
+  unlet! b:did_indent
+  runtime! indent/coffee.vim
+endif
+
+if s:use_typescript
+  unlet! b:did_indent
+  runtime! indent/typescript.vim
+endif
+
+" Recover shiftwidth
+let &sw = s:sw
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Settings {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " 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)
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Functions {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+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 curline = getline(v:lnum)
+  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')
+    let ind = ind - &sw
+  endif
+
+  " Align '/>' and '>' with '<' for multiline tags.
+  if curline =~? s:tag_end 
+    let ind = ind - &sw
+  endif
+  " Then correct the indentation of any element following '/>' or '>'.
+  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')
+      if curline =~? s:full_tag_end 
+        let ind = indent(v:lnum - 1) - &sw
+      else
+        let ind = indent(v:lnum - 1)
+      endif
+    endif
+  endif
+  return ind
+endfunction
+
+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! SynsHTML(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueTemplate)'
+function! s:SynHTML(syn)
+  return a:syn ==? 'htmlVueTemplate'
 endfunction
 
-function! SynsPug(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueTemplatePug)'
+function! s:SynPug(syn)
+  return a:syn ==? 'pugVueTemplate'
 endfunction
 
-function! SynsSASS(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueStyleSASS)'
+function! s:SynCoffee(syn)
+  return a:syn ==? 'coffeeVueScript'
 endfunction
 
-function! SynsCSS(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueStyle)'
+function! s:SynTypeScript(syn)
+  return a:syn ==? 'typescriptVueScript'
 endfunction
 
-function! SynsVueScope(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueStyle)|(vueScript)'
+function! s:SynSASS(syn)
+  return a:syn ==? 'sassVueStyle'
 endfunction
 
-function! GetVueIndent()
-  let curline = getline(v:lnum)
-  let prevline = getline(v:lnum - 1)
-  let cursyns = SynsEOL(v:lnum)
-  let prevsyns = SynsEOL(v:lnum - 1)
+function! s:SynSCSS(syn)
+  return a:syn ==? 'cssScssVueStyle'
+endfunction
 
-  if SynsPug(prevsyns)
-    call s:LogMsg('syntax: pug')
-    let ind = GetPugIndent()
+function! s:SynStylus(syn)
+  return a:syn ==? 'cssStylusVueStyle'
+endfunction
 
-  elseif SynsHTML(prevsyns)
-    call s:LogMsg('syntax: html')
-    let ind = XmlIndentGet(v:lnum, 0)
+function! s:SynStyle(syn)
+  return a:syn =~? 'VueStyle'
+endfunction
 
-    " Align '/>' and '>' with '<' for multiline tags.
-    if curline =~? s:end_tag 
-      let ind = ind - &sw
+function! s:SynCustomBlocks(syn)
+  return a:syn =~? 'Block'
+endfunction
+
+function! s:SynVueScriptOrStyle(syn)
+  return a:syn =~? '\v(VueStyle)|(VueScript)'
+endfunction
+
+function! s:PrevMultilineEmptyTag(lnum)
+  let lnum = a:lnum - 1
+  let lnums = [0, 0]
+  while lnum > 0
+    let line = getline(lnum)
+    if line =~? s:empty_tag_end
+      let lnums[1] = lnum
     endif
-    " Then correct the indentation of any element following '/>' or '>'.
-    if prevline =~? s:end_tag
-      let ind = ind + &sw
-    endif
-  elseif SynsSASS(prevsyns)
-    call s:LogMsg('syntax: sass')
-    let ind = GetSassIndent()
-  elseif SynsCSS(prevsyns)
-    call s:LogMsg('syntax: css')
-    let ind = GetCSSIndent()
-  else
-    call s:LogMsg('syntax: javascript')
-    if len(b:vue_js_indentexpr)
-      let ind = eval(b:vue_js_indentexpr)
-    else
-      let ind = cindent(v:lnum)
+
+    if line =~? s:tag_start
+      if line =~? s:empty_tag_start
+        let lnums[0] = lnum
+        return lnums
+      else
+        return [0, 0]
+      endif
     endif
+
+    let lnum = lnum - 1
+  endwhile
+endfunction
+
+function! s:PrevNonBlacnkNonComment(lnum)
+  let curline = getline(a:lnum)
+  let cursyns = s:SynsEOL(a:lnum)
+  let cursyn = get(cursyns, 1, '')
+  if cursyn =~? 'comment' && !empty(curline)
+    return prevnonblank(a:lnum - 1)
   endif
 
-  if curline =~? s:vue_tag || curline =~? s:vue_end_tag 
-    call s:LogMsg('current line is vue tag')
-    let ind = 0
-  elseif s:has_init_indent
-    if SynsVueScope(cursyns) && ind == 0
-      call s:LogMsg('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
-  endif
-  call s:LogMsg('result indent: '.ind)
-
-  return ind
+  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! s:LogMsg(msg)
-  if s:debug
-    echom '['.s:name.'] '.a:msg
-  endif
-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-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

@@ -0,0 +1,90 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+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 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 VueInject contained '\v\$\w*'
+
+syntax region VueExpression 
+      \ containedin=ALLBUT,htmlComment
+      \ matchgroup=VueBrace
+      \ transparent
+      \ start="{{"
+      \ end="}}"
+syntax region VueExpression 
+      \ containedin=htmlVueTemplate,pugVueTemplate,VueValue,htmlString,htmlValue
+      \ contains=@simpleJavascriptExpression
+      \ matchgroup=VueBrace
+      \ 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  
+      \ 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
+  syntax match VueValue contained '\v\"\zs[^"]+\ze\"'
+        \ contains=VueInject,@simpleJavascriptExpression
+  highlight default link VueKey Type
+  highlight default link VueQuote VueAttr
+  highlight default link VueValue None
+else
+  syntax match VueValue contained '\v\"\zs[^"]+\ze\"'
+  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-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,135 +1,306 @@
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Vim syntax file
 "
-" Language: Vue (Wepy)
+" Language: Vue
 " Maintainer: leaf <leafvocation@gmail.com>
 "
 " CREDITS: Inspired by mxw/vim-jsx.
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 if exists("b:current_syntax") && b:current_syntax == 'vue'
   finish
 endif
 
-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
-
-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
-  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'
-endfunction
-
-function! s:LoadFullSyntax(group, type)
-  unlet! b:current_syntax
-  exec 'syn include '.a:group.' syntax/'.a:type.'.vim'
-endfunction
-
-"""""""""""""""""""""""""""""""""""""""""""""""
+" For advanced users, this variable can be used to avoid overload
+let b:current_loading_main_syntax = 'vue'
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
-" Main
+" Config {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""
-" Load syntax/*.vim to syntax group
-call s:LoadSyntax('@HTMLSyntax', 'html')
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+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)
+"}}}
+
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Load main syntax {{{
+"
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+" Load syntax/html.vim to syntax group, which loads full JavaScript and CSS
+" syntax. It defines group @html, @htmlJavaScript, and @htmlCss.
+call vue#LoadSyntax('@html', 'html')
 
 " Avoid overload
-if hlexists('cssTagName') == 0
-  call s:LoadSyntax('@htmlCss', 'css')
+if !hlexists('cssTagName')
+  call vue#LoadSyntax('@htmlCss', 'css')
 endif
 
 " Avoid overload
-if hlexists('jsNoise') == 0
-  call s:LoadSyntax('@jsAll', 'javascript')
+if !hlexists('javaScriptComment')
+  call vue#Log('load javascript cluster')
+  call vue#LoadSyntax('@htmlJavaScript', 'javascript')
 endif
 
-"""""""""""""""""""""""""""""""""""""""""""""""
+" Load vue-html syntax
+runtime syntax/vue-html.vim
+
+" Load vue-javascript syntax
+runtime syntax/vue-javascript.vim
+"}}}
+
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
-" 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')
+  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 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 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
 
-let b:current_syntax = 'vue'
+" If stylus is enabled, load stylus syntax 
+if s:use_stylus
+  call vue#LoadFullSyntax('@StylusSyntax', 'stylus')
+  runtime! after/syntax/stylus.vim
+endif
 
-" Find tag <template> / <script> / <style> and enable currespond syntax
-syn region vueTemplate 
-      \ start=+<template\(\s.\{-}\)\?>+ 
-      \ end=+^</template>+ 
-      \ keepend contains=@HTMLSyntax
-syn region vueTemplatePug 
-      \ start=+<template lang="pug"\(\s.\{-}\)\?>+ 
-      \ end=+</template>+ 
+" If CoffeeScript is enabled, load the syntax. Keep name consistent with
+" vim-coffee-script/after/html.vim
+if s:use_coffee
+  call vue#LoadFullSyntax('@htmlCoffeeScript', 'coffee')
+endif
+
+" If TypeScript is enabled, load the syntax.
+if s:use_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=@html
+" When template code is not well indented
+syntax region htmlVueTemplate fold
+      \ start=+<template[^>]*>+
+      \ end=+</template>\ze\n\(^$\n\)*<\(script\|style\)+
+      \ keepend contains=@html
+
+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 typescriptVueScript fold
+      \ start=+<script[^>]*lang=["']ts["'][^>]*>+
+      \ end=+</script>+
+      \ keepend contains=@TypeScript,vueTag
+
+syntax region cssLessVueStyle fold
+      \ start=+<style[^>]*lang=["']less["'][^>]*>+
+      \ end=+</style>+
       \ keepend contains=@LessSyntax,vueTag
-syn region vueStyleSASS 
-      \ start=+<style lang="sass"\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
-      \ keepend contains=@SassSyntax,vueTag
-syn region vueStyleSCSS 
-      \ start=+<style lang="scss"\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
+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
 
-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
+" 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
 
-" 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
+syntax region cssStylusVueStyle fold
+      \ start=+<style[^>]*lang=["']stylus["'][^>]*>+
+      \ end=+</style>+
+      \ keepend contains=@StylusSyntax,vueTag
 
-hi def link vueTag htmlTag
+syntax region vueTag fold
+      \ start=+^<[^/]+ end=+>+ skip=+></+
+      \ contained contains=htmlTagN,htmlString,htmlArg
+syntax region vueTag 
+      \ start=+^</+ end=+>+
+      \ contains=htmlTagN,htmlString,htmlArg
+
+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")
+    syntax iskeyword @,48-57,_,128-167,224-235,$,-
+  else
+    syntax iskeyword @,48-57,_,192-255,$,-
+  endif
+else
+  setlocal iskeyword+=-
+endif
+
+" Style
+" Redefine (less|sass|stylus)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,cssLessDefinition 
+        \ contained containedin=cssLessVueStyle
+        \ start="{" end="}" 
+endif
+if s:use_sass
+  silent! syntax clear sassDefinition
+  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,cssStylusDefinition
+        \ contained containedin=cssStylusVueStyle
+        \ start="{" end="}" 
+endif
+
+" Use a different name in order to avoid css syntax interference
+silent! syntax clear cssUnitDecorators
+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,stylusCssAttribute
+
+silent! syntax clear cssKeyFrameProp
+syn match cssKeyFrameProp2 /\d*%\|from\|to/ 
+      \ contained nextgroup=cssDefinition
+      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute,stylusCssAttribute
+
+" 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=@html
+"}}}
+
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax sync {{{
+"
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+syntax sync clear
+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["'][^>]*>"
+syntax sync match scriptHighlight groupthere typescriptVueScript "<script[^>]*lang=["']ts["'][^>]*>"
+syntax sync match templateHighlight groupthere htmlVueTemplate "<template"
+syntax sync match templateHighlight groupthere pugVueTemplate "<template[^>]*lang=["']pug["'][^>]*>"
+syntax sync match styleHighlight groupthere cssVueStyle "<style"
+syntax sync match styleHighlight groupthere cssLessVueStyle "<style[^>]*lang=["']less["'][^>]*>"
+syntax sync match styleHighlight groupthere sassVueStyle "<style[^>]*lang=["']sass["'][^>]*>"
+syntax sync match styleHighlight groupthere cssScssVueStyle "<style[^>]*lang=["']scss["'][^>]*>"
+syntax sync match styleHighlight groupthere cssStylusVueStyle "<style[^>]*lang=["']stylus["'][^>]*>"
+"}}}
+
+let b:current_syntax = 'vue'
+" vim: fdm=marker