👉🏻 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.
If you're using Vue 3, you're probably using composables. But other than using VueUse where you can, how do you get the most out of them? Over the past few years I've been slowly putting together a list of patterns and best practices for how to write composables in the best way. I've spent hours reading the source code of VueUse (one of the best — but most time-consuming — ways to learn it). I've read articles, listened to talks, and written lots and lots of my own code. I ended up with 15 different patterns, and each one will help you to write better composables. I've condensed and put all of these composables together into a course — Composable Design Patterns. Get Composable Design Patterns now. Because this is the launch, it's on sale for 35% off until Thursday. For each of the 15 patterns in this course, you'll get: A concise overview that tells you when and how to use it, along with variations and edge cases ...
Weekly Vue News #194 Reactive Time Ago View online Hi 👋 I'm on vacation this week, so no special news from my side — just some fresh Vue & Nuxt content for you! Enjoy this issue and have a lovely week ☀️ Vue 📕 Optimizing heavy operations in Vue with Web Worke...
Hey! In yesterday's email I shared what I think is the key feature to making Vue components highly reusable: Scoped slots. But scoped slots are hard to grasp, and even more difficult to master. So today, we're going to make sure we understand them on a deep, intuitive level. Then, I'm going to introduce you to the magic ✨ of scoped slots. The trick is to think of them as functions. Slots are just functions We're going to recreate the functionality of slots, but we'll use a regular Javascript function that only returns HTML. This is the code we'll replicate: <!-- Parent --> < template > < div class = "modal-container" > < div class = "modal" > Content in the Parent < Child class = "mb-4" v-slot = "{ text }" > ...
评论
发表评论