How to Disable the default Nuxt 3 SPA Loading Template?

I added these two configs in nuxt.config.ts { ssr: false, spaLoadingTemplate: false, } I restart my server. But it is still showing what I don't want. How to disable the default loading template? Please help me out.
29 Replies
kapa.ai
kapa.ai3d ago
Hi @Istiak Hossain Tushar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To disable the default Nuxt 3 SPA loading template, you should set the spaLoadingTemplate option to false in your nuxt.config.ts. According to the official documentation:
If it is false, no SPA loading indicator will be loaded.
Nuxt Configuration: spaLoadingTemplate
Your configuration should look like this:
export default defineNuxtConfig({
ssr: false,
spaLoadingTemplate: false,
})
export default defineNuxtConfig({
ssr: false,
spaLoadingTemplate: false,
})
If you have already set this and the loading template still appears, please ensure: - You have restarted your development server after making the change. - There are no other layers or modules overriding this setting. - You are not referencing a custom ~/spa-loading-template.html file elsewhere in your project. If the issue persists even after these checks, it may be a bug or a caching issue. Try clearing .nuxt and node_modules, then reinstall dependencies and restart the server. But according to the documentation, setting spaLoadingTemplate: false should disable the loading template entirely. If it does not, the knowledge sources do not provide further troubleshooting steps for this specific scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3d ago
<@641713131797741578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Istiak Hossain Tushar
I restart my dev server. but still showing. It automatically saved nuxt-loading-enable-animation in my local storage. @kapa.ai
kapa.ai
kapa.ai3d ago
Let me check the knowledge base for you again. One moment! :books: Sorry @Istiak Hossain Tushar, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
Istiak Hossain Tushar
@kapa.ai I just removed spaLoadingTemplate: false and ssr:false from nuxt.config.ts I created a spa-loading-template.html page in my root Nuxt 3 folder. Then I restart my dev server. But default loading showing. My spa-loading-template.html is not overriding the default loading template
kapa.ai
kapa.ai3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- According to the Nuxt 3 documentation, if you want to override the default SPA loading template, you should place a file named spa-loading-template.html in the root of your project (or in one of your layers). Nuxt should automatically use this file when rendering client-only pages (ssr: false). If you have removed both spaLoadingTemplate and ssr: false from your config, Nuxt will not be in SPA mode, and the SPA loading template will not be used at all. Key points to check: 1. SPA Mode Required: The custom spa-loading-template.html is only used when ssr: false is set in your nuxt.config.ts. If you remove ssr: false, Nuxt will run in SSR mode and will not use the SPA loading template, so your custom file will be ignored and the default loading (or no loading) will show instead Nuxt Rendering Modes. 2. File Location: The file must be named exactly spa-loading-template.html and placed in the project root (not in the pages or public directory) Nuxt Configuration: spaLoadingTemplate. 3. No Explicit Config Needed: If you want to use your custom template, you do not need to set spaLoadingTemplate in your config unless you want to specify a different path. By default, Nuxt will look for ~/spa-loading-template.html. 4. Restart Required: After adding or changing spa-loading-template.html, you must restart your dev server. Summary:
If you want your custom spa-loading-template.html to be used, you must set ssr: false in your nuxt.config.ts. Without this, Nuxt will not use the SPA loading template at all, and your custom file will be ignored.
export default defineNuxtConfig({
ssr: false,
// No need to set spaLoadingTemplate if using the default path
})
export default defineNuxtConfig({
ssr: false,
// No need to set spaLoadingTemplate if using the default path
})
If you follow these steps and still see the default loading, double-check the filename and location, and ensure you have restarted the server. If the problem persists, the knowledge sources do not provide further troubleshooting steps for this scenario Nuxt Configuration: spaLoadingTemplate. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3d ago
<@641713131797741578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Istiak Hossain Tushar
@kapa.ai you are giving me Nuxt 4 docs. I told you I am using Nuxt 3
kapa.ai
kapa.ai3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for pointing that out. Based on the knowledge sources provided, the documentation and examples reference Nuxt 4, but there is no explicit information about how this behavior differs in Nuxt 3. The sources indicate that placing a spa-loading-template.html file in the project root and setting ssr: false in nuxt.config.ts should override the default SPA loading template. However, there is no clear documentation in the sources about this process specifically for Nuxt 3. If you are using Nuxt 3 and your custom spa-loading-template.html is not being picked up (even after setting ssr: false and restarting the dev server), the knowledge sources do not provide enough information to explain or resolve this issue for Nuxt 3 specifically. The behavior described in the sources is for Nuxt 4, and it is possible that the override mechanism or file location is different or not supported in the same way in Nuxt 3. I'm sorry, but the knowledge sources do not contain enough information about overriding the SPA loading template in Nuxt 3. If you need Nuxt 3-specific guidance, you may need to consult the official Nuxt 3 documentation or community resources, as the provided sources do not cover this scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3d ago
<@641713131797741578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Istiak Hossain Tushar
@kapa.ai I must need to change SPA loading template. How to do that? Find me a way
kapa.ai
kapa.ai3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- To change the SPA loading template in Nuxt, you need to: 1. Set your project to client-side rendering by adding ssr: false in your nuxt.config.ts. 2. Create a file named spa-loading-template.html in the root of your project (not in pages or public). 3. Add your custom HTML and styles to this file. 4. Restart your development server. Example nuxt.config.ts:
export default defineNuxtConfig({
ssr: false,
// No need to set spaLoadingTemplate if using the default path
})
export default defineNuxtConfig({
ssr: false,
// No need to set spaLoadingTemplate if using the default path
})
Example spa-loading-template.html (placed in your project root):
<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%;
animation: loader 400ms linear infinite;
}
@keyframes loader {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>
<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%;
animation: loader 400ms linear infinite;
}
@keyframes loader {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>
With this setup, Nuxt should use your custom loading template when running in SPA mode (ssr: false). If you do not set ssr: false, the SPA loading template will not be used Nuxt Configuration: spaLoadingTemplate Universal Rendering. If this does not work in your version of Nuxt 3, the knowledge sources do not provide further troubleshooting steps or confirm if this feature is fully supported in Nuxt 3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3d ago
<@641713131797741578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Istiak Hossain Tushar
@kapa.ai this does not work version of Nuxt 3
kapa.ai
kapa.ai3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about customizing or overriding the SPA loading template in Nuxt 3. All available documentation and examples about the spa-loading-template.html file and related configuration options reference Nuxt 4, and there is no confirmation in the sources that this feature works the same way or is available in Nuxt 3. If you are using Nuxt 3 and the custom SPA loading template is not being picked up, the knowledge sources do not provide a solution or workaround for this version. You may need to consult the official Nuxt 3 documentation or community channels for further assistance, as the provided sources do not cover this scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3d ago
<@641713131797741578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
kapa.ai
kapa.ai3d ago
Let me check the knowledge base for you again. One moment! :books:
MEE6
MEE63d ago
istiakhossaintushar9153 has been warned
Reason: Mass mention
kapa.ai
kapa.ai3d ago
---------------------- You are seeing this warning because npm audit fix --force is attempting to resolve vulnerabilities by downgrading @nuxt/content to version 2.7.2, which is a breaking change if your project relies on features from a newer version. The audit output indicates that @nuxt/content (version >=2.8.0) depends on a vulnerable version of js/mdc, leading to high severity vulnerabilities. Why is this happening? - npm audit fix --force will sometimes downgrade packages to resolve vulnerabilities, even if that means installing an older, potentially incompatible version. - In this case, it wants to install @nuxt/content@2.7.2 because later versions depend on a vulnerable version of js/mdc. How to solve it? - The knowledge sources do not provide a direct solution for this specific vulnerability chain in Nuxt Content v2. - However, a common approach is to upgrade both Nuxt and Nuxt Content to the latest compatible versions, as newer releases often address such vulnerabilities. For example, upgrading to at least @nuxt/content@2.8.2 and nuxt@3.7.2 resolved similar component conflict issues and may also address vulnerabilities Stack Overflow: WARN [nuxt] Two component files resolving. - After upgrading, run npx nuxi upgrade --force to ensure all dependencies are updated and deduplicated. If upgrading is not possible or the vulnerability persists, you may need to wait for a patch from the Nuxt team or consider using the overrides field in your package.json to force a non-vulnerable version of the dependency, but this approach carries risks and should be tested carefully Stack Overflow: Axios vulnerability detected. Summary:
You are seeing this because of a dependency vulnerability in js/mdc required by @nuxt/content. The recommended solution is to upgrade to the latest versions of Nuxt and Nuxt Content, and avoid using npm audit fix --force if it results in breaking changes. The knowledge sources do not provide a more specific fix for this scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3d ago
<@641713131797741578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Istiak Hossain Tushar
@kapa.ai If I install nuxt content version 2.7.2 in nuxt 4 it will be okay? There will be no error?
kapa.ai
kapa.ai3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources provided, there is no explicit information confirming that @nuxt/content@2.7.2 is compatible with Nuxt 4. In fact, the documentation and migration guides focus on using Nuxt Content v3 with Nuxt 3 or 4, and do not mention support for v2.x of Nuxt Content with Nuxt 4. The official upgrade and migration guides recommend upgrading both Nuxt and Nuxt Content to their latest major versions for compatibility and to avoid breaking changes Upgrade Guide Migrate Nuxt UI Pro Documentation Starter. Therefore, installing @nuxt/content@2.7.2 in a Nuxt 4 project is likely to cause compatibility issues or errors, and is not recommended according to the available documentation. If you need to use Nuxt 4, you should use @nuxt/content@^3 or higher. I'm sorry, but the knowledge sources do not confirm that using @nuxt/content@2.7.2 with Nuxt 4 will work without errors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3d ago
<@641713131797741578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Istiak Hossain Tushar
@kapa.ai my current nuxt content version is "@nuxt/content": "^3.6.3",
kapa.ai
kapa.ai3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- If your current Nuxt Content version is ^3.6.3, you should not downgrade to @nuxt/content@2.7.2 in a Nuxt 4 project. The knowledge sources indicate that Nuxt Content v3 is designed for use with modern Nuxt versions (Nuxt 3 and Nuxt 4), and downgrading to v2.x is not recommended or supported for these versions. Migration guides and upgrade instructions consistently recommend using the latest compatible major versions together Migrate Nuxt UI Pro Documentation Starter Upgrade Guide. Downgrading to @nuxt/content@2.7.2 may result in compatibility issues or errors, as v2 is not intended for use with Nuxt 4. The knowledge sources do not provide any evidence that this combination will work without problems. Recommendation:
Continue using @nuxt/content@^3.6.3 with Nuxt 4. Do not downgrade to v2.x, as this is not supported and may break your project. If you are facing vulnerabilities or issues, look for updates or patches in the v3.x series, or consult the official documentation for further guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3d ago
<@641713131797741578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Istiak Hossain Tushar
@kapa.ai I am seeing this error annot start nuxt: TAR_BAD_ARCHIVE: Unrecognized archive format 4:35:19 PM
at warnMethod (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/warn-method.js:24:42)
at warnMethod (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/warn-method.js:24:42)
at Unpack.warn (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/parse.js:131:9) at Unpack.warn (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/parse.js:131:9) at Unpack.warn (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/unpack.js:234:22)
at Unpack.warn (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/unpack.js:234:22)
at Unpack.<anonymous> (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/parse.js:94:22)
at Unpack.<anonymous> (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/parse.js:94:22)
at Unpack.emit (node:events:530:35) at [emit] (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/parse.js:318:18) at [maybeEnd] (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/parse.js:486:23) at Unpack.end (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/tar/dist/esm/parse.js:589:31) at Pipe.end (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/minipass/dist/esm/index.js:107:23)
at [emitEnd2] (/C:/Users/iT/Desktop/Nuxt/jonopath-nuxt-4-app/node_modules/minipass/dist/esm/index.js:818:15)
For nuxt content. How to fix this
kapa.ai
kapa.ai3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain any information about the TAR_BAD_ARCHIVE: Unrecognized archive format error when starting Nuxt or using Nuxt Content. There are no explicit troubleshooting steps or explanations for this specific error in the provided documents. Based on the knowledge sources, if you encounter issues related to dependencies or package installations, a common recommendation is to delete your node_modules and lockfile (package-lock.json or yarn.lock), then reinstall your dependencies and restart your development server. However, for this specific TAR error, there is no direct guidance in the sources. If the problem persists, you may need to seek further help from the official Nuxt documentation or community channels, as the provided knowledge sources do not address this error. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3d ago
<@641713131797741578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?