diff --git a/org.eclipse.wildwebdeveloper/grammars/vue/LICENSE.txt b/org.eclipse.wildwebdeveloper/grammars/vue/LICENSE.txt
new file mode 100644
index 0000000000..b55e47a7e8
--- /dev/null
+++ b/org.eclipse.wildwebdeveloper/grammars/vue/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Johnson Chu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/org.eclipse.wildwebdeveloper/grammars/vue/Readme.md b/org.eclipse.wildwebdeveloper/grammars/vue/Readme.md
index 73834c76e8..26b58cebfc 100644
--- a/org.eclipse.wildwebdeveloper/grammars/vue/Readme.md
+++ b/org.eclipse.wildwebdeveloper/grammars/vue/Readme.md
@@ -1 +1 @@
-This is a copy from https://github.com/vuejs/language-tools/tree/master/packages/vscode-vue/syntaxes/
+This is a copy from https://github.com/vuejs/language-tools/tree/v2.2.8/extensions/vscode/syntaxes
diff --git a/org.eclipse.wildwebdeveloper/grammars/vue/markdown-vue.json b/org.eclipse.wildwebdeveloper/grammars/vue/markdown-vue.json
index 198ebdd6ef..c95ea6be7d 100644
--- a/org.eclipse.wildwebdeveloper/grammars/vue/markdown-vue.json
+++ b/org.eclipse.wildwebdeveloper/grammars/vue/markdown-vue.json
@@ -20,7 +20,8 @@
 					"name": "fenced_code.block.language.markdown"
 				},
 				"5": {
-					"name": "fenced_code.block.language.attributes.markdown"
+					"name": "fenced_code.block.language.attributes.markdown",
+					"patterns": []
 				}
 			},
 			"endCaptures": {
diff --git a/org.eclipse.wildwebdeveloper/grammars/vue/mdx-vue.json b/org.eclipse.wildwebdeveloper/grammars/vue/mdx-vue.json
new file mode 100644
index 0000000000..cd3b2f932a
--- /dev/null
+++ b/org.eclipse.wildwebdeveloper/grammars/vue/mdx-vue.json
@@ -0,0 +1,64 @@
+{
+	"fileTypes": [ ],
+	"scopeName": "mdx.vue.codeblock",
+	"injectionSelector": "L:source.mdx",
+	"patterns": [
+		{
+			"include": "#vue-code-block"
+		}
+	],
+	"repository": {
+		"vue-code-block": {
+			"patterns": [
+				{
+					"begin": "(?:^|\\G)[\\t ]*(`{3,})(?:[\\t ]*((?i:(?:.*\\.)?vue))(?:[\\t ]+((?:[^\\n\\r`])+))?)(?:[\\t ]*$)",
+					"beginCaptures": {
+						"1": {
+							"name": "string.other.begin.code.fenced.mdx"
+						},
+						"2": {
+							"name": "entity.name.function.mdx"
+						}
+					},
+					"contentName": "meta.embedded.vue",
+					"end": "(\\1)(?:[\\t ]*$)",
+					"endCaptures": {
+						"1": {
+							"name": "string.other.end.code.fenced.mdx"
+						}
+					},
+					"name": "markup.code.vue.mdx",
+					"patterns": [
+						{
+							"include": "source.vue"
+						}
+					]
+				},
+				{
+					"begin": "(?:^|\\G)[\\t ]*(~{3,})(?:[\\t ]*((?i:(?:.*\\.)?vue))(?:[\\t ]+((?:[^\\n\\r])+))?)(?:[\\t ]*$)",
+					"beginCaptures": {
+						"1": {
+							"name": "string.other.begin.code.fenced.mdx"
+						},
+						"2": {
+							"name": "entity.name.function.mdx"
+						}
+					},
+					"contentName": "meta.embedded.vue",
+					"end": "(\\1)(?:[\\t ]*$)",
+					"endCaptures": {
+						"1": {
+							"name": "string.other.end.code.fenced.mdx"
+						}
+					},
+					"name": "markup.code.vue.mdx",
+					"patterns": [
+						{
+							"include": "source.vue"
+						}
+					]
+				}
+			]
+		}
+	}
+}
diff --git a/org.eclipse.wildwebdeveloper/grammars/vue/vue-directives.json b/org.eclipse.wildwebdeveloper/grammars/vue/vue-directives.json
index eda55d5b58..ff85024ef1 100644
--- a/org.eclipse.wildwebdeveloper/grammars/vue/vue-directives.json
+++ b/org.eclipse.wildwebdeveloper/grammars/vue/vue-directives.json
@@ -1,7 +1,7 @@
 {
 	"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
 	"fileTypes": [],
-	"injectionSelector": "L:meta.tag -meta.attribute -entity.name.tag.pug -attribute_value -source.tsx -source.js.jsx, L:meta.element -meta.attribute",
+	"injectionSelector": "L:meta.tag -meta.attribute -meta.ng-binding -entity.name.tag.pug -attribute_value -source.tsx -source.js.jsx, L:meta.element -meta.attribute",
 	"patterns": [
 		{
 			"include": "source.vue#vue-directives"
diff --git a/org.eclipse.wildwebdeveloper/grammars/vue/vue.tmLanguage.json b/org.eclipse.wildwebdeveloper/grammars/vue/vue.tmLanguage.json
index f4e783a902..05d00ef84d 100644
--- a/org.eclipse.wildwebdeveloper/grammars/vue/vue.tmLanguage.json
+++ b/org.eclipse.wildwebdeveloper/grammars/vue/vue.tmLanguage.json
@@ -3,6 +3,9 @@
 	"name": "Vue",
 	"scopeName": "source.vue",
 	"patterns": [
+		{
+			"include": "#vue-comments"
+		},
 		{
 			"include": "text.html.basic#comment"
 		},
@@ -439,6 +442,38 @@
 						}
 					]
 				},
+				{
+					"begin": "([a-zA-Z0-9:-]+)\\b(?=[^>]*\\blang\\s*=\\s*(['\"]?)coffee\\b\\2)",
+					"beginCaptures": {
+						"1": {
+							"name": "entity.name.tag.$1.html.vue"
+						}
+					},
+					"end": "(</)(\\1)\\s*(?=>)",
+					"endCaptures": {
+						"1": {
+							"name": "punctuation.definition.tag.begin.html.vue"
+						},
+						"2": {
+							"name": "entity.name.tag.$2.html.vue"
+						}
+					},
+					"patterns": [
+						{
+							"include": "#tag-stuff"
+						},
+						{
+							"begin": "(?<=>)",
+							"end": "(?=<\\/)",
+							"name": "source.coffee",
+							"patterns": [
+								{
+									"include": "source.coffee"
+								}
+							]
+						}
+					]
+				},
 				{
 					"begin": "([a-zA-Z0-9:-]+)\\b(?=[^>]*\\blang\\s*=\\s*(['\"]?)json\\b\\2)",
 					"beginCaptures": {
@@ -953,37 +988,42 @@
 			]
 		},
 		"vue-directives-original": {
-			"begin": "(?:\\b(v-)|(:)|(@)|(#))(\\[?)([\\w\\-]*)(\\]?)(?:\\.([\\w\\-]*))*",
+			"begin": "(?:(?:(v-[\\w-]+)(:)?)|([:\\.])|(@)|(#))(?:(?:(\\[)([^\\]]*)(\\]))|([\\w-]+))?",
 			"beginCaptures": {
 				"1": {
 					"name": "entity.other.attribute-name.html.vue"
 				},
 				"2": {
-					"name": "punctuation.attribute-shorthand.bind.html.vue"
+					"name": "punctuation.separator.key-value.html.vue"
 				},
 				"3": {
-					"name": "punctuation.attribute-shorthand.event.html.vue"
+					"name": "punctuation.attribute-shorthand.bind.html.vue"
 				},
 				"4": {
-					"name": "punctuation.attribute-shorthand.slot.html.vue"
+					"name": "punctuation.attribute-shorthand.event.html.vue"
 				},
 				"5": {
-					"name": "punctuation.separator.key-value.html.vue"
+					"name": "punctuation.attribute-shorthand.slot.html.vue"
 				},
 				"6": {
-					"name": "entity.other.attribute-name.html.vue"
+					"name": "punctuation.separator.key-value.html.vue"
 				},
 				"7": {
-					"name": "punctuation.separator.key-value.html.vue"
+					"name": "source.ts.embedded.html.vue",
+					"patterns": [
+						{
+							"include": "source.ts#expression"
+						}
+					]
 				},
 				"8": {
-					"name": "entity.other.attribute-name.html.vue"
+					"name": "punctuation.separator.key-value.html.vue"
 				},
 				"9": {
-					"name": "punctuation.separator.key-value.html.vue"
+					"name": "entity.other.attribute-name.html.vue"
 				}
 			},
-			"end": "(?=\\s*+[^=\\s])",
+			"end": "(?=\\s*[^=\\s])",
 			"endCaptures": {
 				"1": {
 					"name": "punctuation.definition.string.end.html.vue"
@@ -991,6 +1031,15 @@
 			},
 			"name": "meta.attribute.directive.vue",
 			"patterns": [
+			  {
+					"match": "(\\.)([\\w-]*)",
+					"1": {
+						"name": "punctuation.separator.key-value.html.vue"
+					},
+					"2": {
+						"name": "entity.other.attribute-name.html.vue"
+					}
+				},
 				{
 					"include": "#vue-directives-expression"
 				}
@@ -1039,7 +1088,7 @@
 							"name": "source.ts.embedded.html.vue",
 							"patterns": [
 								{
-									"include": "source.ts"
+									"include": "source.ts#expression"
 								}
 							]
 						}
@@ -1060,7 +1109,7 @@
 							"name": "source.ts.embedded.html.vue",
 							"patterns": [
 								{
-									"include": "source.ts"
+									"include": "source.ts#expression"
 								}
 							]
 						}
@@ -1225,13 +1274,46 @@
 							"name": "source.ts.embedded.html.vue",
 							"patterns": [
 								{
-									"include": "source.ts"
+									"include": "source.ts#expression"
 								}
 							]
 						}
 					]
 				}
 			]
+		},
+		"vue-comments": {
+			"patterns": [
+				{
+					"include": "#vue-comments-key-value"
+				}
+			]
+		},
+		"vue-comments-key-value": {
+			"begin": "(<!--)\\s*(@)([\\w$]+)(?=\\s)",
+			"beginCaptures": {
+				"1": {
+					"name": "punctuation.definition.comment.vue"
+				},
+				"2": {
+					"name": "punctuation.definition.block.tag.comment.vue"
+				},
+				"3": {
+					"name": "storage.type.class.comment.vue"
+				}
+			},
+			"end": "(-->)",
+			"endCaptures": {
+				"1": {
+					"name": "punctuation.definition.comment.vue"
+				}
+			},
+			"name": "comment.block.vue",
+			"patterns": [
+				{
+					"include": "source.json#value"
+				}
+			]
 		}
 	}
 }
\ No newline at end of file
diff --git a/org.eclipse.wildwebdeveloper/language-configurations/vue/LICENSE.txt b/org.eclipse.wildwebdeveloper/language-configurations/vue/LICENSE.txt
new file mode 100644
index 0000000000..b55e47a7e8
--- /dev/null
+++ b/org.eclipse.wildwebdeveloper/language-configurations/vue/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Johnson Chu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/org.eclipse.wildwebdeveloper/language-configurations/vue/Readme.md b/org.eclipse.wildwebdeveloper/language-configurations/vue/Readme.md
index 24b351ab24..d391e5d422 100644
--- a/org.eclipse.wildwebdeveloper/language-configurations/vue/Readme.md
+++ b/org.eclipse.wildwebdeveloper/language-configurations/vue/Readme.md
@@ -1 +1 @@
-This is a copy from https://github.com/vuejs/language-tools/tree/master/packages/vscode-vue/languages
\ No newline at end of file
+This is a copy from https://github.com/vuejs/language-tools/tree/v2.2.8/extensions/vscode/languages
diff --git a/org.eclipse.wildwebdeveloper/plugin.xml b/org.eclipse.wildwebdeveloper/plugin.xml
index 3252c9a95d..68849633f3 100644
--- a/org.eclipse.wildwebdeveloper/plugin.xml
+++ b/org.eclipse.wildwebdeveloper/plugin.xml
@@ -541,33 +541,30 @@
             label="VUE Language Server"/>
       <contentTypeMapping contentType="org.eclipse.wildwebdeveloper.vue" languageId="vue" id="org.eclipse.wildwebdeveloper.vue"/>
     </extension>
-    <extension
-         point="org.eclipse.tm4e.registry.grammars">
-      <grammar
-            path="grammars/vue/vue.tmLanguage.json"
-            scopeName="source.vue">
-      </grammar>
-      <scopeNameContentTypeBinding
-            contentTypeId="org.eclipse.wildwebdeveloper.vue"
-            scopeName="source.vue">
-      </scopeNameContentTypeBinding>
-      <grammar
-         
-            path="grammars/vue/markdown-vue.json"
-            scopeName="markdown.vue.codeblock">
-      </grammar>
-      <grammar
-            path="grammars/vue/vue-directives.json"
-            scopeName="vue.directives">
-      </grammar>
-      <grammar
-            path="grammars/vue/vue-interpolations.json"
-            scopeName="vue.interpolations">
-      </grammar>
-      <grammar
-            path="grammars/vue/vue-sfc-style-variable-injection.json"
-            scopeName="vue.sfc.style.variable.injection">
-      </grammar>
+    <extension point="org.eclipse.tm4e.registry.grammars">
+      <grammar path="grammars/vue/vue.tmLanguage.json" scopeName="source.vue" />
+      <scopeNameContentTypeBinding contentTypeId="org.eclipse.wildwebdeveloper.vue" scopeName="source.vue" />
+
+      <grammar path="grammars/vue/markdown-vue.json" scopeName="markdown.vue.codeblock" />
+      <injection scopeName="markdown.vue.codeblock" injectTo="text.html.markdown" />
+
+      <grammar path="grammars/vue/mdx-vue.json" scopeName="mdx.vue.codeblock" />
+      <injection scopeName="mdx.vue.codeblock" injectTo="source.mdx" />
+
+      <grammar path="grammars/vue/vue-directives.json" scopeName="vue.directives" />
+      <injection scopeName="vue.directives" injectTo="source.vue" />
+      <injection scopeName="vue.directives" injectTo="text.html.markdown" />
+      <injection scopeName="vue.directives" injectTo="text.html.derivative" />
+      <injection scopeName="vue.directives" injectTo="text.pug" />
+
+      <grammar path="grammars/vue/vue-interpolations.json" scopeName="vue.interpolations" />
+      <injection scopeName="vue.interpolations" injectTo="source.vue" />
+      <injection scopeName="vue.interpolations" injectTo="text.html.markdown" />
+      <injection scopeName="vue.interpolations" injectTo="text.html.derivative" />
+      <injection scopeName="vue.interpolations" injectTo="text.pug" />
+
+      <grammar path="grammars/vue/vue-sfc-style-variable-injection.json" scopeName="vue.sfc.style.variable.injection"/>
+      <injection scopeName="vue.sfc.style.variable.injection" injectTo="source.vue" />
    </extension>
 
    <extension