👉🏻 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.
👉🏻 "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."
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>45<script setup>6import { defineAsyncComponent } from 'vue'78const AsyncComp = defineAsyncComponent(() => {9 return new Promise((resolve, reject) => {10 // ...load component from server11 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>45<script>6import { defineAsyncComponent } from 'vue'7import Loading from './components/Loading'89export default {10 components: {11 AsyncComp: defineAsyncComponent({12 // the loader function13 loader: () =>14 new Promise((resolve) => {15 setTimeout(() => {16 resolve(import('./components/HelloWorld.vue'))17 }, 2000)18 }),1920 // A component to use while the async component is loading21 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:
👉🏻 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.
Saturday, January 10, 2026 Bob Weir is gone . # Today's song: Playing in the Band . # What's happening with ICE is like January 6 four years later with billions of dollars behind it and many months of planning and studying history for prior art. # As I listened to the mayor of Minneapolis speak I thought he was going say "get the fuck out of Minneapolis" but of course he couldn't say that and then he said it. # I'm doing little demos of stuff I'm working on in WordLand, here's a narrated demo that shows how instant updates are going. As often the recording level is too low, so turn up the volume if you want to hear the comments. A productive Saturday session. # John Johnston , a longtime friend of UserLand and my newer products, asks how WordLand connects with FeedLand. Two ways. 1. FeedLand has an API, still working on it, but it will be public. 2. FeedLand has an outbound websockets interface , which is already public,...
评论
发表评论