bat/tests/syntax-tests/source/Vue/example.vue
Martin Nordholts 7334ab4542
Bump to syntect 5.0.0 to e.g. start lazy-loading syntaxes (#2181)
* Bump to syntect 5.0.0 to e.g. start lazy-loading themes

Closes #915
Closes #951
Closes #1846
Closes #1854

* Typo fix formated -> formatted

* Update CHANGELOG.md
2022-05-07 13:43:11 +02:00

61 lines
1.1 KiB
Vue
Vendored

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