add syntax highlight for *.vue component files

.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

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/:

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"

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>

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>