You can use Nuxt with the client-side rendering mode to create a single-page application (SPA). In this mode, Nuxt will only render the application on the client-side. This means that the server will only send a minimal HTML document to the client. The client will then render the application and fetch the data from the API.
When using the client-side rendering mode, Nuxt will display a loading indicator until the application is hydrated. The loading indicator is a simple spinner. You can customize the loading indicator by creating a custom loading component.
Info
Since Nuxt 3.7 this loading indicator is disabled per default. You need to manually enable it by setting the spaLoadingTemplate option to true in your nuxt.config.ts file:1export default defineNuxtConfig({
2 ssr: false, // enables SPA rendering mode
3 spaLoadingTemplate: true, // per default disabled since Nuxt 3.7
4})
You can place a custom HTML file in ~/app/spa-loading-template.html to customize the loading indicator. The file must contain a single HTML element which will be rendered as the loading indicator. For example, the following code is referenced in the official docs:
1<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
2<div class="loader"></div>
3<style>
4 .loader {
5 display: block;
6 position: fixed;
7 z-index: 1031;
8 top: 50%;
9 left: 50%;
10 transform: translate(-50%, -50%);
11 width: 18px;
12 height: 18px;
13 box-sizing: border-box;
14 border: solid 2px transparent;
15 border-top-color: #000;
16 border-left-color: #000;
17 border-bottom-color: #efefef;
18 border-right-color: #efefef;
19 border-radius: 50%;
20 -webkit-animation: loader 400ms linear infinite;
21 animation: loader 400ms linear infinite;
22 }
23
24 \@-webkit-keyframes loader {
25 0% {
26 -webkit-transform: translate(-50%, -50%) rotate(0deg);
27 }
28 100% {
29 -webkit-transform: translate(-50%, -50%) rotate(360deg);
30 }
31 }
32 \@keyframes loader {
33 0% {
34 transform: translate(-50%, -50%) rotate(0deg);
35 }
36 100% {
37 transform: translate(-50%, -50%) rotate(360deg);
38 }
39 }
40</style>StackBlitz
You can try it yourself in the following StackBlitz project:
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Deep Watch on Arrays
In Vue 3, when using the watch option to watch an array, the callback will only trigger when the array is replaced. To trigger the watcher on mutation, the deep option must be specified.
Vue Tip: Use Your Composables Synchronously
You should always call your composables synchronously in setup() hook or <script setup>. Otherwise Vue will not be able to determine the current active component instance and cannot correctly register features like lifecycle hooks, watchers, and computed properties.