diff --git a/tests/syntax-tests/highlighted/Vue/example.vue b/tests/syntax-tests/highlighted/Vue/example.vue
new file mode 100644
index 00000000..d8da0852
--- /dev/null
+++ b/tests/syntax-tests/highlighted/Vue/example.vue
@@ -0,0 +1,55 @@
+<template>
+  <div id="app" class="container-fluid">
+    <AppHeader></AppHeader>
+    <transition name="page" mode="out-in" v-if="!isLoading">
+      <router-view></router-view>
+    </transition>
+    <AppLoadingIndicator></AppLoadingIndicator>
+  </div>
+</template>
+
+<script>
+import AppHeader from "@/components/AppHeader";
+import AppLoadingIndicator from "@/components/AppLoadingIndicator";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "App",
+  components: {
+    AppHeader,
+    AppLoadingIndicator,
+  },
+  beforeCreate() {
+    this.$store.dispatch("fetchData");
+  },
+  data: {
+    message: "Hello!"
+  },
+  computed: {
+    ...mapGetters({
+      isLoading: "isLoading",
+    }),
+  },
+};
+</script>
+
+<style>
+body {
+  background-color: rgba(72, 163, 184, 0.05) !important;
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.2s;
+}
+
+.page-enter,
+.page-leave-active {
+  opacity: 0;
+}
+
+.page-enter:hover {
+    opacity: 1;
+}
+
+</style>
diff --git a/tests/syntax-tests/source/Vue/example.vue b/tests/syntax-tests/source/Vue/example.vue
new file mode 100644
index 00000000..5e0467f1
--- /dev/null
+++ b/tests/syntax-tests/source/Vue/example.vue
@@ -0,0 +1,55 @@
+<template>
+  <div id="app" class="container-fluid">
+    <AppHeader></AppHeader>
+    <transition name="page" mode="out-in" v-if="!isLoading">
+      <router-view></router-view>
+    </transition>
+    <AppLoadingIndicator></AppLoadingIndicator>
+  </div>
+</template>
+
+<script>
+import AppHeader from "@/components/AppHeader";
+import AppLoadingIndicator from "@/components/AppLoadingIndicator";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "App",
+  components: {
+    AppHeader,
+    AppLoadingIndicator,
+  },
+  beforeCreate() {
+    this.$store.dispatch("fetchData");
+  },
+  data: {
+    message: "Hello!"
+  },
+  computed: {
+    ...mapGetters({
+      isLoading: "isLoading",
+    }),
+  },
+};
+</script>
+
+<style>
+body {
+  background-color: rgba(72, 163, 184, 0.05) !important;
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.2s;
+}
+
+.page-enter,
+.page-leave-active {
+  opacity: 0;
+}
+
+.page-enter:hover {
+    opacity: 1;
+}
+
+</style>