bat/tests/syntax-tests/highlighted/Vue/example.vue
2020-10-24 12:25:55 +02:00

56 lines
7.2 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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