bat/tests/syntax-tests/source/Vue/example.vue

61 lines
1.1 KiB
Vue

<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>
<template lang='pug'>
#container.col
p This shall be formatted as Plain Text as long as a Pug syntax definition is missing
</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>