diff options
Diffstat (limited to 'tests/syntax-tests/source/Vue/example.vue')
-rw-r--r-- | tests/syntax-tests/source/Vue/example.vue | 55 |
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> |