summaryrefslogtreecommitdiffstats
path: root/tests/syntax-tests/source/Vue/example.vue
diff options
context:
space:
mode:
Diffstat (limited to 'tests/syntax-tests/source/Vue/example.vue')
-rw-r--r--tests/syntax-tests/source/Vue/example.vue55
1 files changed, 55 insertions, 0 deletions
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>