runtime! after/syntax/html.vim

syn keyword vueComponentTag     contained template containedin=htmlSpecialTagName

syn match   vueDirective "\(^\|\s\)\zs[v:][-:.0-9_a-z]*"   containedin=htmlTag,vueTag,htmlTagN contains=vueDirectiveClass nextgroup=vueDirectiveValue
syn match   vueEvent        "\(^\|\s\)\zs[@][-:.0-9_a-z]*" containedin=htmlTag,vueTag,htmlTagN nextgroup=vueEventValue
syn match   vueConditional  "\<v-else"                     containedin=htmlTag,vueTag,htmlTagN
syn match   vueConditional  "\<v-else-if"                     containedin=htmlTag,vueTag,htmlTagN nextgroup=vueConditionalValue
syn match   vueConditional  "\<v-if\|\<v-show"             containedin=htmlTag,vueTag,htmlTagN nextgroup=vueConditionalValue
syn match   vueSlot         +\<slot=+he=e-1               containedin=htmlTag,vueTag,htmlTagN nextgroup=vueSlotValue
syn match   vueFor          "\<v-for"                      containedin=htmlTag,vueTag,htmlTagN nextgroup=vueForValue
syn match   vueRef          "\(^\|\s\)\zs:\?ref"           containedin=htmlTag,vueTag,htmlTagN nextgroup=vueRefValue

syn region vueMustache  start="{{"hs=s+2 end="}}"he=e-2
syn region vueDirectiveClass      contained start=+class="+hs=s+7 end=+"+he=e-1 contains=vueObjectKey
syn region vueDirectiveValue      contained start=+="+hs=s+2 end=+"+he=e-1
" syn region vueDirectiveValue      contained start=+='+hs=s+2 end=+'+he=e-1

syntax match   vueObjectKey         contained /\<\k*\ze\s*:/ contains=jsFunctionKey skipwhite skipempty nextgroup=vueObjectValue
syntax region  vueObjectKey   contained start=+\z([']\)+hs=s+1  skip=+\\\%(\z1\|$\)+  end=+\z1\|$+he=e-1  contains=jsSpecial,@Spell skipwhite skipempty nextgroup=vueObjectValue
syntax region  vueObjectValue       contained matchgroup=jsNoise start=/:/ end=/[,}]\@=/ contains=@jsExpression extend
" TODO match vueObjectValue with a javascript expression

syn region vueEventValue          contained start=+="+hs=s+2 end=+"+he=e-1
syn region vueEventValue          contained start=+='+hs=s+2 end=+'+he=e-1
syn region vueConditionalValue    contained start=+="+hs=s+2 end=+"+he=e-1
syn region vueConditionalValue    contained start=+='+hs=s+2 end=+'+he=e-1
syn region vueForValue            contained start=+="+hs=s+2 end=+"+he=e-1
syn region vueForValue            contained start=+='+hs=s+2 end=+'+he=e-1
syn match vueRefValue             contained +="[-:.0-9_a-z]*"+hs=s+2,he=e-1
syn match vueRefValue             contained +='[-:.0-9_a-z]*'+hs=s+2,he=e-1
syn match vueSlotValue            contained +"[-:.0-9_a-z]*"+hs=s+1,he=e-1
syn match vueSlotValue            contained +'[-:.0-9_a-z]*'+hs=s+1,he=e-1

syn match vueComponentName contained "\(<\|</\)\zsvue-[0-9A-Za-z\-]\+\|\(<\|</\)\zs\u\+[0-9A-Za-z]\+\ze\(\s\|>\)" containedin=htmlTag,vueTag,htmlTagN
syn region vueLink start="<router-link\>[^>]*" end="</router-link>"me=e-14 contains=@Spell,vueTag,htmlEndTag,htmlSpecialChar,htmlPreProc,htmlComment,htmlLeadingSpace,javaScript,@htmlPreproc,vueComponentName
syn region  vueTag                start=+<[^/]+   end=+>+ fold contained contains=htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent,htmlCssDefinition,@htmlPreproc,@htmlArgCluster,vueDynamicComponent
syn match vueComponentName contained "router-link" containedin=vueTag,htmlEndTag
hi! def link vueLink htmlLink

syn match vueDynamicComponent contained "\<component\>\|\<keep-alive\>\|\<router-link\>" containedin=htmlTag,vueTag,htmlTagN
syn match  vueTransitionComponent contained "\<transition\>" containedin=htmlTag,vueTag,htmlTagN nextgroup=vueTransitionName,vueTransitionMode
syn region vueTransitionName contained start=+\sname="+hs=s+7 end=+"+he=e-1 containedin=htmlTag,vueTag,htmlTagN
syn region vueTransitionMode contained start=+\smode="+hs=s+7 end=+"+he=e-1 containedin=htmlTag,vueTag,htmlTagN

syn keyword vueTagSpecial  contained template script style containedin=htmlTagN
syn keyword htmlArg        contained scoped ts

" syn region cssClassRegion contained start=+classes="+hs=s+9 end=+"+he=e-1 contains=htmlSpecialChar,cssClassAttr,cssAttrNoise,cssClassName containedin=htmlTag,htmlTagN keepend
" syn region cssClassRegion contained start=+classes='+hs=s+9 end=+'+he=e-1 contains=htmlSpecialChar,cssClassAttr,cssAttrNoise,cssClassName containedin=htmlTag,htmlTagN keepend

syn match cssClassesAttr contained "\<[-a-zA-z0-9]*class[-a-zA-z0-9]*=" contains=htmlSpecialChar,cssClassAttr,cssAttrNoise,cssClassName containedin=htmlTag,vueTag,htmlTagN keepend nextgroup=vueClassesName

syn region vueClassesName contained start=+"+hs=s+1 end=+"+he=e-1

hi def link cssClassesAttr cssClassAttr
hi def link vueClassesname cssClassName
hi def link vueObjectKey   cssClassName
hi def link vueDirectiveClass Noise
hi def link vueDirectiveClassName vueClassesName
hi def link vueMustache Identifier