I have been looking in documentation and googling for a long time and for some reason I can't seem to figure out how to disable the default Nuxt3 loading indicator. Does anyone know how to deal with this?
It only appears for a split second when I refresh page on the "/" path, so the page that displays the index.vue page. Attaching an image for reference.
I have been looking in documentation and googling for a long time and for some reason I can't seem to figure out how to disable the default Nuxt3 loading indicator. Does anyone know how to deal with this?
It only appears for a split second when I refresh page on the "/" path, so the page that displays the index.vue page. Attaching an image for reference.
Share Improve this question edited Apr 20, 2024 at 8:32 kissu 46.9k16 gold badges90 silver badges189 bronze badges asked Jul 15, 2023 at 11:40 Bartek PierścińskiBartek Pierściński 551 silver badge4 bronze badges 1- Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Jul 15, 2023 at 15:51
2 Answers
Reset to default 8Try to set { spaLoadingTemplate: false } in nuxt.config.ts.
You can also create your own loading indicator.
More info here: https://nuxt./docs/api/configuration/nuxt-config#spaloadingtemplate
You can add your own custom loader by creating an app-loading.html in root directory of your application and adding it in the nuxt.config.ts file like this { spaLoadingTemplate: './app-loading.html' }
your app-loading.html can look like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="accept-ch" content="DPR" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
.loader{
position: fixed;
inset: 0rem;
display: grid;
place-items: center;
background-color: white;
z-index: 50;
}
.loader__img{
width: 4.5rem;
animation: bounce 1s linear infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
</style>
</head>
<body>
<div class="loader">
<img src="/loader.png" class="loader__img"/>
</div>
</body>
</html>