Weekly Vue News #165

Delay Loading Appearance of Spinner

Hi 👋

I've created a Telegram channel where I'll post updates whenever a new newsletter issue is out! Feel free to join and stay in the loop.

Have a lovely week ☀️

Vue

📕 Better Vue Components with TypeScript [12 examples]

👉🏻 Fotis demonstrates that using Vue with TypeScript brings many benefits.

👉🏻 With features like typed props, emits, slots, state management, and generics, it noticeably improves the readability of a codebase and ensures everything works as expected.

📕 Implementing Prefetching in Vue apps

👉🏻 "In short words, we will be sending a request under the hood for the next resources so that when user clicks the load more button, they will instantly see the result."

🎧 Vue 3.5 Analyzed

👉🏻 Vue 3.5 came out recently, so why not using the opportunity to dive into the features of the new minor version?

👉🏻 Michael and Alex will do so and discuss performance improvements, SSR features and new composables in detail.

📹 Why I Love Vue's Newest Feature

👉🏻 With the release of Vue 3.5, we got the ability to defer the mounting of a Teleport component.

👉🏻 This unlocks some cool use cases and Matt talks about how it works and what we can do with it.

🛠️ vue-input-otp

👉🏻 One-time passcode Input.

👉🏻 Accessible & unstyled.

💡 Vue Tip: Delay Loading Appearance of Spinner

Eager delay spinners are not a good user experience as they can make a snappy user interface feel slower. We can provide a better user experience (UX) by delaying spinners to appear only after a perceivable delay.

To achieve this improved UX, you can use AsyncComponent. Vue provides the defineAsyncComponentdefineAsyncComponent function to lazy load components:

1<template>  2  <AsyncComp />  3</template>  4  5<script setup>  6import { defineAsyncComponent } from 'vue'  7  8const AsyncComp = defineAsyncComponent(() => {  9  return new Promise((resolve, reject) => {  10    // ...load component from server  11    resolve(/* loaded component */)  12  })  13})  14</script>

defineAsyncComponentdefineAsyncComponent accepts a loader function that returns a Promise. The resolveresolve callback should be called if the component has been loaded, and the rejectreject callback to indicate that loading the component has failed.

Now let's implement the delayed loading spinner by using the advanced options of the defineAsyncComponentdefineAsyncComponent function:

1<template>  2  <AsyncComp />  3</template>  4  5<script>  6import { defineAsyncComponent } from 'vue'  7import Loading from './components/Loading'  8  9export default {  10  components: {  11    AsyncComp: defineAsyncComponent({  12      // the loader function  13      loader: () =>  14        new Promise((resolve) => {  15          setTimeout(() => {  16            resolve(import('./components/HelloWorld.vue'))  17          }, 2000)  18        }),  19  20      // A component to use while the async component is loading  21      loadingComponent: Loading,  22      // Delay before showing the loading component. Default: 200ms.  23      delay: 500,  24    }),  25  },  26  data() {},  27}  28</script>

This demo simulates a network request to fetch HelloWorld.vueHelloWorld.vue from a server which takes 2 seconds:

1new Promise((resolve) => {  2  setTimeout(() => {  3    resolve(import('./components/HelloWorld.vue'))  4  }, 2000)  5})

The loading component Loading.vueLoading.vue is shown after a delay of 500ms, defined with delay: 500delay: 500.

You can try it yourself in this StackBlitz playground:

✨ Open Demo

Nuxt

📕 Understanding Environment Variables in Nuxt 3*

👉🏻 This blog post delves into the usage and understanding of environment variables in Nuxt 3+.

👉🏻 It covers the importance of .env files, explains how to create and use them, and highlights best practices.

📕 Getting Started with NuxtUI*

👉🏻 Discover how to leverage NuxtUI with Nuxt 3 and Composition API.

👉🏻 Learn installation, customization, and theming in this guide for modern web development.

📹 Passing Cookies with event.$fetch and useRequestFetch in Nuxt

👉🏻 Ever wondered why cookies are not passed correctly to subrequests - e.g. during SSR or when using Nitro/H3?

👉🏻 Alexander takes a look at how to pass all the important information, including event context and headers to further calls, eliminating different behavior on server and client.

📹 resolveComponent in Nuxt

👉🏻 Wondering why `resolveComponent` might work a bit differently in Nuxt compared to plain Vue?

👉🏻 Daniel Roe gives a quick overview of why.

🛠️ NPM Chart

👉🏻 Turn npm downloads into visually striking charts that you can save as PNG or SVG and share with your community.

👉🏻 Built with Nuxt & Nuxt Hub, source code is open source and available on GitHub.