Weekly Vue News #112 - Custom SPA Loading Template for Your Nuxt Application

Weekly Vue News #112

Custom SPA Loading Template for Your Nuxt Application

Hi 👋

Nothing new from me this week, I'm mainly working on new content for the upcoming newsletter issues.

But I would love to gather some feedback from you to improve the newsletter. I created a short survey with 5 questions. It will take you less than 2 minutes to complete it. You can find the survey here.

Thanks and have a lovely week ☀️

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Nuxt Tip: Custom SPA Loading Template for Your Nuxt Application

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.

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:

nuxt.config.ts

            1 export 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:

app/spa-loading-template.html

            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>

You can try it yourself in the following StackBlitz project:

⚡ Open Demo

Quote of the week

Curated Vue & Nuxt Content

📕 3 Major Problems of Reusable Components in Vue.js

👉🏻 "Creating actual reusable components in Vue.js can be challenging due to issues related to modifying existing components, maintaining consistency, and managing dependencies and state. "

dev.to

📕 Vue.js Memory Leak Identification And Solution

👉🏻 This article dives into the causes of memory leaks in Vue.js applications and explores effective strategies to identify and fix them.

blog.jobins.jp

📕 How to Use Error Handling to Create Rock Solid Nuxt Apps

👉🏻 This article explores preventing user frustrations in your Nuxt 3 application by building rock solid applications through error handling.

masteringnuxt.com

📕 Building a Mobile Game with Phaser and Ionic Vue: Part One

👉🏻 This blog series will walk through how to use Phaser, Ionic Vue, and Capacitor to build a mobile game of your own and run it on an actual mobile device.

dev.to

📹 Build ChatGPT 2.0 with Vue 3, Node Js, Express Js OpenAI

👉🏻 In this video, you'll learn how to build a ChatGPT clone with Vue 3, Node.js, Express, and OpenAI API.

www.youtube.com

📹 Perfect Vue Test Environment with Playwright and Vitest

👉🏻 In this video you'll learn how you can decouple your tests from a particular test framework.

www.youtube.com

🛠️ Vue TermUI

👉🏻 A Vue.js based terminal UI framework that allows you to build modern terminal applications with ease.

vue-termui.dev

Upcoming Vue & Nuxt Events

💬 Exclusive Live Q&A session with the Author of Pinia

👉🏻 Sign up today, it happens tomorrow.

👉🏻 You will get a chance to ask your questions to Eduardo and learn more from a Vue.js Core team member.

masteringpinia.com

📅 North America's premier Vue.js Conference

👉🏻 9-10 November 2023, Toronto, Canada.

www.vuetoronto.com

Fun

Curated Web Development Content

📹 TypeScript Origins: The Documentary

👉🏻 This documentary tells the story of how and why TypeScript came to be and how the technology and surrounding community have grown since TypeScript's initial release.

www.youtube.com