Adding a splash screen for the full-page loading cycle in a Vue 3 app is a common requirement to provide feedback to the user while the app is initializing or loading data. Here's how you can implement it:
---
1. Basic Idea
You can use a splash screen component that is shown until the app finishes loading. This involves:
Adding a splash screen element to the DOM.
Controlling its visibility based on a loading state.
---
2. Implementation Steps
a. Add a Splash Screen to Your Template
Add a splash screen element in the root App.vue file:
b. Use Vuex/Global State (Optional)
If your app loads data from multiple sources or the loading logic is scattered across components, you can manage the loading state using Vuex or a global variable.
1. Create a global loading state:
2. Update App.vue:
c. Show Splash Screen During Navigation (Router Hook)
To keep the splash screen visible during navigation between routes:
1. Add a beforeEach hook in your router:
2. Update App.vue to use the store state for the splash screen visibility.
---
3. Enhancing the Splash Screen
To improve the user experience, consider adding:
Animations: Use CSS transitions or libraries like Animate.css.
Loading Indicators: Add a spinner or progress bar.
Branding: Include a logo or branding element in the splash screen.
Example (with animations):
4. Optional: Loading Data Dynamically
If you want to wait for real data to load:
Final Notes
The above solution is flexible and works with Vue Router, Vuex, or standalone components.
Make sure your splash screen does not block users for too long—use skeleton screens or partial loading for better UX if necessary.
---
1. Basic Idea
You can use a splash screen component that is shown until the app finishes loading. This involves:
Adding a splash screen element to the DOM.
Controlling its visibility based on a loading state.
---
2. Implementation Steps
a. Add a Splash Screen to Your Template
Add a splash screen element in the root App.vue file:
JavaScript:
<template>
<div id="app">
<!-- Splash Screen -->
<div v-if="isLoading" class="splash-screen">
<p>Loading...</p>
</div>
<!-- Main Content -->
<div v-else>
<router-view />
</div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true, // Initial state for splash screen
};
},
mounted() {
// Simulate an async operation (e.g., fetch initial data or wait for app initialization)
setTimeout(() => {
this.isLoading = false; // Hide splash screen when loading is complete
}, 2000); // Adjust time as needed
},
};
</script>
<style>
/* Basic Splash Screen Styling */
.splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #ffffff; /* Change color to match your design */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Ensure it appears above everything */
}
.splash-screen p {
font-size: 1.5rem;
color: #333; /* Adjust text color */
}
</style>
---b. Use Vuex/Global State (Optional)
If your app loads data from multiple sources or the loading logic is scattered across components, you can manage the loading state using Vuex or a global variable.
1. Create a global loading state:
JavaScript:
// store.js
import { createStore } from 'vuex';
export default createStore({
state: {
isLoading: true,
},
mutations: {
setLoading(state, status) {
state.isLoading = status;
},
},
actions: {
finishLoading({ commit }) {
commit('setLoading', false);
},
},
});2. Update App.vue:
JavaScript:
<template>
<div id="app">
<div v-if="$store.state.isLoading" class="splash-screen">
<p>Loading...</p>
</div>
<div v-else>
<router-view />
</div>
</div>
</template>
<script>
export default {
mounted() {
// Simulate app initialization or data fetching
setTimeout(() => {
this.$store.dispatch('finishLoading');
}, 2000);
},
};
</script>
---c. Show Splash Screen During Navigation (Router Hook)
To keep the splash screen visible during navigation between routes:
1. Add a beforeEach hook in your router:
JavaScript:
// router.js
import { createRouter, createWebHistory } from 'vue-router';
import store from './store'; // Import the Vuex store
const router = createRouter({
history: createWebHistory(),
routes: [
// Define your routes
],
});
router.beforeEach((to, from, next) => {
store.commit('setLoading', true); // Show splash screen
next();
});
router.afterEach(() => {
setTimeout(() => {
store.commit('setLoading', false); // Hide splash screen after navigation
}, 500); // Add a delay if necessary
});
export default router;2. Update App.vue to use the store state for the splash screen visibility.
---
3. Enhancing the Splash Screen
To improve the user experience, consider adding:
Animations: Use CSS transitions or libraries like Animate.css.
Loading Indicators: Add a spinner or progress bar.
Branding: Include a logo or branding element in the splash screen.
Example (with animations):
JavaScript:
.splash-screen {
animation: fadeOut 1s ease-in-out forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
---4. Optional: Loading Data Dynamically
If you want to wait for real data to load:
JavaScript:
mounted() {
fetch('/api/data')
.then((response) => response.json())
.then(() => {
this.isLoading = false; // Hide splash screen after data is fetched
})
.catch(() => {
this.isLoading = false; // Hide even if there is an error
});
}
---Final Notes
The above solution is flexible and works with Vue Router, Vuex, or standalone components.
Make sure your splash screen does not block users for too long—use skeleton screens or partial loading for better UX if necessary.