diff --git a/syntax/vue-javascript.vim b/syntax/vue-javascript.vim
index 1bb8e35..c5e526f 100644
--- a/syntax/vue-javascript.vim
+++ b/syntax/vue-javascript.vim
@@ -21,12 +21,18 @@ let s:indent = &sw * (1 + s:has_init_indent)
let s:keywords_regexp = '\v^\s{'.s:indent.'}(async )?<('
\.join(split(s:vue_keywords, ' '), '|')
\.')\ze'
-let contains = hlexists('jsAsyncKeyword')
+
+" 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=jsObject,javascriptVueScript'
- \.' contains='.contains
+ \' containedin='.s:containedin
+ \.' contains='.s:contains
\.' skipwhite skipempty'
execute 'syntax match vueObjectKey /'
@@ -47,20 +53,22 @@ execute 'syntax match vueObjectFuncKey /'
\.s:match_option
\.' nextgroup=jsFuncArgs'
-let s:vue3_keywords = 'ref reactive toRefs watch computed getCurrentInstance'.
- \' onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted onErrorCaptured onRenderTracked onRenderTriggered'
+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 vueObjectFuncName /'
+execute 'syntax match vue3Keyword /'
\.s:vue3_keywords_regexp
\.'\_s*\(/'
\.s:match_option
- \.' nextgroup=jsFuncArgs'
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
"}}}
diff --git a/syntax/vue.vim b/syntax/vue.vim
index 41afee4..d50bc4e 100644
--- a/syntax/vue.vim
+++ b/syntax/vue.vim
@@ -77,12 +77,10 @@ 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')
-" Load vue-html syntax
-runtime syntax/vue-html.vim
+" Load syntax/html.vim to syntax group, which loads full JavaScript and CSS
+" syntax. It defines group @html, @htmlJavaScript, and @htmlCss.
+call s:LoadSyntax('@html', 'html')
" Avoid overload
if !hlexists('cssTagName')
@@ -95,6 +93,9 @@ if !hlexists('javaScriptComment')
call s:LoadSyntax('@htmlJavaScript', 'javascript')
endif
+" Load vue-html syntax
+runtime syntax/vue-html.vim
+
" Load vue-javascript syntax
runtime syntax/vue-javascript.vim
"}}}
@@ -155,12 +156,12 @@ endif
syntax region htmlVueTemplate fold
\ start=+]*>+
\ end=+^+
- \ keepend contains=@HTMLSyntax
+ \ keepend contains=@html
" When template code is not well indented
syntax region htmlVueTemplate fold
\ start=+]*>+
\ end=+\ze\n\(^$\n\)*<\(script\|style\)+
- \ keepend contains=@HTMLSyntax
+ \ keepend contains=@html
syntax region javascriptVueScript fold
\ start=+