Что такое spaLoadingTemplate? 🤔

Loading Template (шаблон загрузки) — предварительно созданная структура, которая используется для отображения пользователю уведомления о загрузке в одностраничном приложении (SPA). Вместо показа пустой страницы, шаблон загрузки предоставляет пользователю приятный интерфейс, который включает в себя анимированные элементы пока основная часть приложения не будет готова к отображению.

spaLoadingTemplate это специальная настройка в Nuxt которая позволяет при использовании режима клиентского рендеринга отображать индикатор загрузки до тех пор, пока приложение не будет загружено. Можно настроить индикатор загрузки, создав собственный компонент.

Начиная с версии Nuxt 3.7 этот индикатор загрузки по умолчанию отключен. Вам необходимо вручную включить его, установив spaLoadingTemplate соответствующий параметр true в nuxt.config.ts:

export default defineNuxtConfig({
  ssr: false, // Переключить в режим SPA
  spaLoadingTemplate: true, // По дефолту отключено с Nuxt 3.7
})

Необходимо создать файл spa-loading-template.html и расположить его в папке app, полный путь: ~/app/spa-loading-template.html

В нем будет описание индтикатора загрузки (просто html + css)

Файл должен содержать один HTML-элемент, который будет отображаться как индикатор загрузки.

Простой пример файла spa-loading-template.html

<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>

Заключение

Теперь вы герой 💪 Пока приложение загружается пользователь будет лицезреть красивый индикатор загрузки, а не просто белый экран 💖