https://stackoverflow.com/questions/54356211/how-do-i-create-a-splash-screen-in-vuejs
????こちらを参考に実現することができました!
default.vue
vue
1<template>
2 <div class="wrapper">
3 <LoadingScreen :isLoading="isLoading" />
4 <transition name="fade" v-if="!isLoading">
5 <Nuxt />
6 </transition>
7 </div>
8</template>
9
10<script>
11const LoadingScreen = () => import("../components/LoadingScreen.vue");
12export default {
13 components: {
14 LoadingScreen,
15 },
16 data() {
17 return {
18 isLoading: true,
19 };
20 },
21 mounted() {
22 setTimeout(() => {
23 this.isLoading = false;
24 }, 1000);
25 },
26};
27</script>
LoadingScreen.vue
vue
1<template>
2 <div :class="{ loader: true, fadeout: !isLoading }">
3 <div>
4 <img class="splash" src="@/assets/images/type/main_type1.png" />
5 </div>
6 </div>
7</template>
8
9<script lang="ts">
10import Vue from "vue";
11export default Vue.extend({
12 name: "LoadingScreen",
13 props: ["isLoading"],
14});
15</script>
16
17<style scoped>
18.loader {
19 background-color: #ffffff;
20 bottom: 0;
21 color: white;
22 display: block;
23 font-size: 32px;
24 left: 0;
25 overflow: hidden;
26 position: fixed;
27 right: 0;
28 text-align: center;
29 top: 0;
30}
31
32.splash {
33 width: 100%;
34}
35
36.fadeout {
37 animation: fadeout 2s forwards;
38}
39
40@keyframes fadeout {
41 to {
42 opacity: 0;
43 visibility: hidden;
44 }
45}
46</style>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。