Nuxt•3w ago

Loading Indicator when ssr:false

Hi, is there any option to add a custom loading indicator while the ssr: false application is loading? something like <NuxtLayout> <template #loading> Loading.. </template> </NuxtLayout>

3 Replies

kapa.ai•3w ago

Hi @kleinpetr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there are options to add a custom loading indicator when using ssr: false in Nuxt 3. Here are two approaches you can consider: 1. Using spaLoadingTemplate: You can create a custom SPA loading template by adding an HTML file at ~/app/spa-loading-template.html. This will be displayed while your SPA is loading. Here's how you can configure it:

export default defineNuxtConfig({
  ssr: false,
  spaLoadingTemplate: true
})

export default defineNuxtConfig({
  ssr: false,
  spaLoadingTemplate: true
})

You can customize the HTML content of this template to show your desired loading indicator. If you don't provide a custom template, Nuxt will use a default animated Nuxt logo Nuxt Configuration (https://nuxt.com/docs/api/nuxt-config#spaloadingtemplate). 2. Using <ClientOnly> component: Since your application is running in SPA mode, you can use the <ClientOnly> component to show a loading state until your app is mounted. Here's an example:

<template>
  <ClientOnly fallback-tag="div" fallback="Loading...">
    <!-- Your app content -->
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </ClientOnly>
</template>

<template>
  <ClientOnly fallback-tag="div" fallback="Loading...">
    <!-- Your app content -->
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </ClientOnly>
</template>

This approach allows you to specify a fallback content that will be rendered on the server and displayed until the <ClientOnly> component is mounted in the browser ClientOnly Component (https://nuxt.com/docs/api/components/client-only). Both of these methods provide ways to show a loading indicator while your SPA is initializing. Choose the one that best fits your specific use case and design requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@672035758940356608> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

kleinpetrOP•3w ago

the spaLoadingTemplate works well

Gaming

Programming

Loading Indicator when ssr:false