Weekly Vue News #199 - Optimize Performance with useInfiniteScroll from VueUse

Weekly Vue News #199 Optimize Vue App Performance with useInfiniteScroll from VueUse View online Hi 👋 No personal news this week - just fresh Vue & Nuxt content for you to dive into! Enjoy this issue and have a lovely week ☀️ Vue 📕 How to access DOM elements with useTemplateRef 👉🏻 The useTemplateRef composable is a much better way to access DOM elements than the old way with refs. 👉🏻 Here's how to use it. 📕 Vue 3 + Pinia + Firebase CRUD App Tutorial 👉🏻 Learn how to build a Vue 3 CRUD app with Pinia and Firebase Firestore, including UI styling and Firebase Hosting deployment. 💡 Vue Tip: Optimize Performance with useInfiniteScroll from VueUse Need to load more content as the user scrolls? VueUse's useInfiniteScroll composable makes it effortless: 1<script setup lang="ts"> 2import { useInfiniteScroll } from '@vueuse/core' 3import { ref, useTemplateRef } from 'vue' 4 5const el = useTemplateRef<HTMLElement>('el') 6 7useInfiniteScroll( 8 el, 9 () => { 10 // load more 11 data.value.push(...moreData) 12 }, 13 { 14 distance: 10, 15 canLoadMore: () => { 16 // inidicate when there is no more content to load so onLoadMore stops triggering 17 // if (noMoreContent) return false 18 return true // for demo purposes 19 }, 20 } 21) 22 23function resetList() { 24 data.value = [] 25 reset() 26} 27</script> 28 29<template> 30 <div ref="el"> 31 <-- List of items --> 32 </div> 33</template> The key features include: Performance-aware: Triggers only when needed, based on scroll position Highly configurable: Customize scroll distance, direction, and event throttling Easy integration: Works seamlessly with the Composition API and reactive data sources For implementation details, visit the documentation. Nuxt 📕 Installing Tailwind CSS v4 on Nuxt 3* 👉🏻 In this article, you'll learn how to install and configure Tailwind v4 in your Nuxt 3 project with a clear, step-by-step guide. 📕 Nuxt Server Routes: Build a Full-Stack App with Zero Backend 👉🏻 In this article, you'll dive into what Nuxt Server Routes are, why they feel magical, and how to build a simple full-stack app that talks directly to a database — no separate server needed. 📕 Making Avatars Move: AI Generated Videos with Runway in a Nuxt App* 👉🏻 Learn how to build an AI-powered moving avatar generator using Nuxt.js (Vue) and Runway. 👉🏻 Transform static profile pictures into animated videos with custom API endpoints with image-to-video AI. 📕 Building a Nuxt module from scratch 👉🏻 In this article, you'll walk through creating a Nuxt module from scratch, step-by-step—from scaffolding to publishing. 📕 Server Routes in Nuxt* 👉🏻 Learn how to create full backend APIs within the Nuxt 3 framework using server routes. 👉🏻 This guide covers endpoint creation, request handling, response types, and the underlying technologies like Nitro and h3. Launch Your Nuxt App in Minutes - Not Weeks I built this starter kit because I kept rewriting the same boilerplate for every new Nuxt project. 📅 Events MadVue (29 May 2025, Madrid, Spain) PragVue (23 September 2025, Czech Republic) VueFes (25 October 2025, Otemachi, Japan) Sponsored Frontend Nation BitterBrains announced the 2nd edition of Frontend Nation, the largest FREE online frontend conference in the world! 🚀 🗓️ Mark your calendars - It's happening on June 3rd - 5th, 2025. 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 Frontends are hard 👉🏻 Deploying modern frontends is challenging due to their complex infrastructure needs and the rapid pace of updates. 👉🏻 Cloud providers struggle to keep up, leading many to use specialized services like Netlify and Vercel. 👉🏻 SST tackles this by open-sourcing frontend adapters through the OpenNext project and its own infrastructure. 📕 Introducing Zod 4 👉🏻 Zod 4 is now stable after a year of development, with improved speed, reduced size, and better TypeScript efficiency. 📕 JavaScript, when is this? 👉🏻 Dives into the complexities of the this keyword, explaining how its value is ultimately determined by the context in which a function is called, rather than where it's defined. 🛠️ Tailwind CSS Color Generator 👉🏻 Instantly create stunning color scales by entering a base color. 🛠️ WebTUI 👉🏻 A modular CSS library with Terminal UI components. 👉🏻 It includes ASCII Boxes, badge, button, checkbox, popover, and other components, along with some plugins. 😂 Fun 🔗 Want more Vue & Nuxt content? More Exclusive Vue Tips: Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Weekly Vue & Nuxt Videos: You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt. DejaVue Podcast: A weekly podcast about Vue.js and the ecosystem around it. Comments? Join the discussion about this issue in our Discord community . Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🦋 Repost the latest BlueSky post 📨 Reply to this email: feedback is welcome * Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter.

Unsubscribe Holzapfelkreuther Str. 19, 81375 Munich, Germany