Javascript is required
1 min read

Nuxt Tip: Custom SPA Loading Template for Your Nuxt Application

Nuxt Tip: Custom SPA Loading Template for Your Nuxt Application Image

You can use Nuxt with the client-side rendering mode to create a single-page application (SPA). In this mode, Nuxt will only render the application on the client-side. This means that the server will only send a minimal HTML document to the client. The client will then render the application and fetch the data from the API.

When using the client-side rendering mode, Nuxt will display a loading indicator until the application is hydrated. The loading indicator is a simple spinner. You can customize the loading indicator by creating a custom loading component.


Since Nuxt 3.7 this loading indicator is disabled per default. You need to manually enable it by setting the spaLoadingTemplate option to true in your nuxt.config.ts file:

1export default defineNuxtConfig({
2  ssr: false, // enables SPA rendering mode
3  spaLoadingTemplate: true, // per default disabled since Nuxt 3.7

You can place a custom HTML file in ~/app/spa-loading-template.html to customize the loading indicator. The file must contain a single HTML element which will be rendered as the loading indicator. For example, the following code is referenced in the official docs:

1<!-- -->
2<div class="loader"></div>
4  .loader {
5    display: block;
6    position: fixed;
7    z-index: 1031;
8    top: 50%;
9    left: 50%;
10    transform: translate(-50%, -50%);
11    width: 18px;
12    height: 18px;
13    box-sizing: border-box;
14    border: solid 2px transparent;
15    border-top-color: #000;
16    border-left-color: #000;
17    border-bottom-color: #efefef;
18    border-right-color: #efefef;
19    border-radius: 50%;
20    -webkit-animation: loader 400ms linear infinite;
21    animation: loader 400ms linear infinite;
22  }
24  \@-webkit-keyframes loader {
25    0% {
26      -webkit-transform: translate(-50%, -50%) rotate(0deg);
27    }
28    100% {
29      -webkit-transform: translate(-50%, -50%) rotate(360deg);
30    }
31  }
32  \@keyframes loader {
33    0% {
34      transform: translate(-50%, -50%) rotate(0deg);
35    }
36    100% {
37      transform: translate(-50%, -50%) rotate(360deg);
38    }
39  }


You can try it yourself in the following StackBlitz project:

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter: