What is a spaLoadingTemplate? 🤔

Loading Template for SPA is a pre—created structure that is used to display a loading notification to the user in a single-page application (SPA). Instead of showing an empty page, the download template provides the user with a more pleasant and informative interface that includes animated elements until the main part of the application is ready for display.

spaLoadingTemplate is a special setting in Nuxt that allows you to display the loading indicator when using client rendering mode until the application is loaded. The loading indicator is a simple rotating element. You can customize the download indicator by creating your own download component.

Starting from Nuxt 3.7, this loading indicator is disabled by default. You need to manually enable it by setting spaloadingtemplate to the appropriate true parameter in the nuxt.config.ts file:

export default defineNuxtConfig({
  ssr: false, // Switch to SPA mode
  spaLoadingTemplate: true, // Disabled by default since Nuxt 3.7
})

You need to add a file **spa-loading-template.html ** to the app folder, full path: ~/app/spa-loading-template.html

It will contain a description of the download indicator (just html + css)

The file must contain one HTML element, which will be displayed as a download indicator.

An example of a simple loading indicator:

<div class="loader"></div>

<style>
  .loader {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: solid 2px transparent;
    border-top-color: #000;
    border-left-color: #000;
    border-bottom-color: #efefef;
    border-right-color: #efefef;
    border-radius: 50%;
    -webkit-animation: loader 400ms linear infinite;
    animation: loader 400ms linear infinite;
  }

  @-webkit-keyframes loader {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes loader {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
</style>

Conclusion

Now, while your app is loading, the user will see a beautiful loading indicator, not just a white screen 💖