diff --git a/.gitmodules b/.gitmodules
index dcd94622..7f02b603 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -665,3 +665,6 @@
 [submodule "vendor/grammars/atom-language-purescript"]
 	path = vendor/grammars/atom-language-purescript
 	url = https://github.com/freebroccolo/atom-language-purescript
+[submodule "vendor/grammars/vue-syntax-highlight"]
+	path = vendor/grammars/vue-syntax-highlight
+	url = https://github.com/vuejs/vue-syntax-highlight
diff --git a/grammars.yml b/grammars.yml
index d6d38438..a1bd7069 100644
--- a/grammars.yml
+++ b/grammars.yml
@@ -544,6 +544,8 @@ vendor/grammars/turtle.tmbundle:
 - source.turtle
 vendor/grammars/verilog.tmbundle:
 - source.verilog
+vendor/grammars/vue-syntax-highlight:
+- text.html.vue
 vendor/grammars/x86-assembly-textmate-bundle:
 - source.asm.x86
 vendor/grammars/xc.tmbundle/:
diff --git a/lib/linguist/languages.yml b/lib/linguist/languages.yml
index a734d452..03874eaa 100644
--- a/lib/linguist/languages.yml
+++ b/lib/linguist/languages.yml
@@ -3516,6 +3516,14 @@ Volt:
   tm_scope: source.d
   ace_mode: d
 
+Vue:
+  type: markup
+  color: "#2c3e50"
+  extensions:
+  - .vue
+  tm_scope: text.html.vue
+  ace_mode: html
+
 Web Ontology Language:
   type: markup
   color: "#9cc9dd"
diff --git a/samples/Vue/basic.vue b/samples/Vue/basic.vue
new file mode 100644
index 00000000..e5918fe7
--- /dev/null
+++ b/samples/Vue/basic.vue
@@ -0,0 +1,21 @@
+<style>
+.red {
+  color: #f00;
+}
+</style>
+
+<template>
+<div>
+  <h2 v-class="red">{{msg}}</h2>
+</div>
+</template>
+
+<script>
+module.exports = {
+  data: function () {
+    return {
+      msg: 'Hello from Vue!'
+    }
+  }
+}
+</script>
diff --git a/samples/Vue/pre-processors.vue b/samples/Vue/pre-processors.vue
new file mode 100644
index 00000000..364a1a1c
--- /dev/null
+++ b/samples/Vue/pre-processors.vue
@@ -0,0 +1,31 @@
+<style lang="stylus">
+font-stack = Helvetica, sans-serif
+primary-color = #999
+body
+  font 100% font-stack
+  color primary-color
+</style>
+
+<template lang="jade">
+div
+  h1 {{msg}}
+  comp-a
+  comp-b
+</template>
+
+<script lang="babel">
+import compA from './components/a.vue'
+import compB from './components/b.vue'
+
+export default {
+  data () {
+    return {
+      msg: 'Hello from Babel!'
+    }
+  },
+  components: {
+    'comp-a': compA,
+    'comp-b': compB
+  }
+}
+</script>
diff --git a/vendor/grammars/vue-syntax-highlight b/vendor/grammars/vue-syntax-highlight
new file mode 160000
index 00000000..6cd3ee17
--- /dev/null
+++ b/vendor/grammars/vue-syntax-highlight
@@ -0,0 +1 @@
+Subproject commit 6cd3ee1743df0cc2d49d66c55437d535dadd579f