Weekly Vue News #187

Side-by-Side Script and Template Editing in VS Code

Hi 👋

I finalized the Nuxt module for Polar to be able to integrate it into my upcoming Nuxt SaaS starter kit. This week, I also have a handy VS Code tip for Vue developers — hope you find it useful!

Enjoy this issue and have a lovely week ☀️

Vue

📕 Building a "Select All" Checkbox Composable in Vue

👉🏻 This post walks through creating a reusable Vue 3 composable to handle "Select All" functionality efficiently.

📕 How to Do Visual Regression Testing in Vue with Vitest?

👉🏻 Visual regression testing detects unintended UI changes by comparing screenshots.

👉🏻 In this guide, you'll learn how to set up visual regression testing for Vue components using Vitest.

📹 Avoid a common Vue PERFORMANCE KILLER

👉🏻 Registering components globally is a common patter but also often a performance killer.

👉🏻 Learn in this video what a better way of adding third party components is and how to spot such chances in existing projects already.

🛠️ swrv

👉🏻 'stale-while-revalidate' data fetching for Vue 3.

👉🏻 Uses a 'stale-with-revalidate' cache invalidation strategy (i.e. data is returned from cache immediately but then updated behind the scenes).

🛠️ Zoompinch

👉🏻 A pinch-and-zoom experience for Vue 3 apps.

👉🏻 Designed to 'feel native' on mobile devices.

💡 Vue Tip: Side-by-Side Script and Template Editing in VS Code

When working with Vue Single File Components (SFCs), managing both the script and template sections can become difficult as the code grows longer, often requiring frequent scrolling.

To simplify this, the Vue - Official extension in VSCode offers the Vue: Split Script, Template, Style Editors feature. This enables you to split the script and template sections, allowing them to be viewed side by side for a more efficient workflow:

Nuxt

📕 Core Nuxt Features for Fast, Scalable, and SEO-Optimized Web Apps

👉🏻 This article explores a carefully curated selection of core Nuxt.js features that make it a standout framework, focusing on how they enhance performance, developer experience, and scalability.

📹 You Are Sleeping On Nuxt, Nitro and Vue

👉🏻 Wes Bos and Scott Tolinski talk with Daniel Roe about Nuxt and Nitro, demystifying the UnJS ecosystem, serverless deployments, open-source sustainability, and the future of full-stack web development.

🛠️ Nuxt Content v3.2.0

👉🏻 Generate LLM-friendly routes (/llms.txt).

👉🏻 Zero config deploy on Netlify, Vercel, & Nuxt Hub.

👉🏻 Schema metadata for form generation on Nuxt Studio.