nuxt 3 - where to customize SPA loading SVG?

Question

When putting an app into non-ssr mode by suppling ssr: false in the config, there is the default green SVG "mountains" provided by nuxt. I know that there was a way to use some built in spinkit spinners in nuxt 2 but I cannot find an away to change / replace this SVG graphic with for example my logo. can someone point me in the right direction please?

Searched high and low but code seems built in somehow

Answer 1

You can customize the SPA loading screen template by calling the file name of the HTML file inside the nuxt.config. Ensure to disable SSR in order for it to work.

nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: false,
  spaLoadingTemplate: 'spa-loading-template.html',
});

Create a file name spa-loading-template.html in the root directory. And that will be your loading screen template.

e.g. spa-loading-template.html

<style>
  .loading {
      background-color: #1e293b;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#15803d;
  }
  
  #spinner {
      width: 30px;
  }
  
  #spinner #sGD stop {
      stop-color: #16a34a;
  }
  
  #spinner .path-solid {
      stroke: #16a34a;
  }
  </style>
  <div class="loading">
          <svg version="1.1" viewBox="0 0 64 64" width="1em" xmlns="http://www.w3.org/2000/svg" id="spinner">
          <circle class="path-gradient" cx="32" cy="32" r="28" fill="none" stroke="url(#sGD)" stroke-width="8" />
          <path class="path-solid" d="M 32,4 A 28 28,0,0,0,32,60" fill="none" stroke="#000" stroke-width="8" stroke-linecap="round"/>
          
          <defs>
              <linearGradient id="sGD" gradientUnits="userSpaceOnUse" x1="32" y1="0" x2="32" y2="64">
                  <stop stop-color="#000" offset="0.1" stop-opacity="0" class="stop1"></stop>
                  <stop stop-color="#000" offset=".9" stop-opacity="1" class="stop2"></stop>
              </linearGradient>
          </defs>
          
          <animateTransform
              values="0,0,0;360,0,0" 
              attributeName="transform" 
              type="rotate" 
              repeatCount="indefinite" 
              dur="750ms">
          </animateTransform>
          </svg>
          </div>
      </div>
  </div>

By following these setup, you should be able to see the custom loading screen.