Add option to highlight vue keywords

README.md

@@ -69,6 +69,7 @@ Set global variable to `1` to enable or `0` to disable. Ex:
 | `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_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_debug`              | Echo debug messages in `messages` list. Useful to debug if unexpected indents occur.                   | 0 |
 
@@ -76,8 +77,8 @@ Set global variable to `1` to enable or `0` to disable. Ex:
 
 **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
 

syntax/vue-html.vim

@@ -5,7 +5,7 @@
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 let s:highlight_vue_attr = exists("g:vim_vue_plugin_highlight_vue_attr")
       \ && g:vim_vue_plugin_highlight_vue_attr == 1
-")}}}
+"}}}
 
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "

syntax/vue-javascript.vim

@@ -0,0 +1,35 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:highlight_vue_keyword = exists("g:vim_vue_plugin_highlight_vue_keyword")
+      \ && g:vim_vue_plugin_highlight_vue_keyword == 1
+
+if !s:highlight_vue_keyword | finish | endif
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" 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'
+
+let s:vue_keywords_regexp = join(split(s:vue_keywords, ' '), '|')
+execute 'syntax match vueObjectKey /\v<('.s:vue_keywords_regexp.')\ze\s*:/'
+      \.' containedin=jsObject,javascriptVueScript'
+      \.' skipwhite skipempty nextgroup=jsObjectValue'
+
+execute 'syntax match vueObjectFuncName /\v<('.s:vue_keywords_regexp.')\ze\_s*\(/'
+      \.' containedin=jsObject,javascriptVueScript'
+      \.' skipwhite skipempty nextgroup=jsFuncArgs'
+
+execute 'syntax match vueObjectFuncKey /\v<('.s:vue_keywords_regexp.')\ze\s*:\s*function>/'
+      \.' containedin=jsObject,javascriptVueScript'
+      \.' skipwhite skipempty nextgroup=jsFuncArgs'
+
+highlight default link vueObjectKey Constant
+highlight default link vueObjectFuncName Constant
+highlight default link vueObjectFuncKey Constant
+"}}}

syntax/vue.vim

@@ -102,6 +102,9 @@ 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
 "}}}
 
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""