Javascript is required
Weekly Vue News Logo
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 8px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #111 - Deep Watch on Arrays #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #111

Deep Watch on Arrays

Hi πŸ‘‹

I have to apologize for sending last week's issue three times. I'm sorry about that. I hope you still enjoyed the content.

I updated the Node version of my serverless functions that send the emails which somehow broke one of the functions. By manually triggering the function it somehow was executed three times. To address that issue I did a large refactoring on the serverless code and now it should be much more robust.

Anyways, I also have some good news: I reached another milestone for this newsletter, it now has 2000+ subscribers! πŸŽ‰ Thank you so much for your support!

Have a lovely week β˜€οΈ

To support me:

Vue Tip: Deep Watch on Arrays

In Vue 3, when using the watch option to watch an array, the callback will only trigger when the array is replaced. In other words, the watch callback is not triggered on array mutation.

Let's take a look at an example:

1<script setup lang="ts">
2import { ref, watch } from 'vue'
4const users = ref([
5 { id: 1, name: 'Mike' },
6 { id: 2, name: 'Flo' },
7 { id: 3, name: 'Chris' },
10const addUser = () => {
11 users.value.push({ id: 4, name: 'New' })
14watch(users, (newUsers) => {
15 console.log('New users', newUsers)
20 <button @click="addUser">Add user</button>
21 <ul>
22 <li v-for="user of users" :key="">
23 {{ }}
24 </li>
25 </ul>

We have an array of users and a button to add a new user. When we click the button, the user is added to the array but the watch callback is not triggered.

To trigger the watcher on mutation, the deep option must be specified:

1<script setup lang="ts">
3 users,
4 (newUsers) => {
5 console.log('New users', newUsers)
6 },
7 { deep: true }

Now, when we click the button, the watch callback is triggered and the new user is logged to the console.

Try it yourself in the following StackBlitz project:

⚑ Open DemoQuote of the weekCurated Vue & Nuxt ContentπŸ“• Faster Vue.js Execution in Firefox
πŸ‘‰πŸ» Mozilla says: "Over the course of the year Firefox has improved by around 40% on the Vue.js benchmark" – find out why.
πŸ“• The Anatomy of a Vue 3 Component
πŸ‘‰πŸ» This article explains the main ingredients of a Vue 3 component using Composition API and Script Setup.
πŸ“• Building accessible forms in Vue with FormKit
πŸ‘‰πŸ» Building forms is not easy but FormKit is here to help.
πŸ‘‰πŸ» It's a form building framework where all the form logic is delivered by FormKit.
πŸ“• Pinia Unlocked: Vue School’s Ultimate Learning Resources
πŸ‘‰πŸ» Vue School has published a helpful guide to Pinia.
πŸ‘‰πŸ» It incudes all these learning resources to help you become a Pinia expert.
πŸ“Ή Vue.js Tutorial: Beginner to Front-End Developer
πŸ‘‰πŸ» A comprehensive, 4-hour course will teach you the fundamental concepts you need to start building applications with Vue 3.
🎧 Daniel Roe - Nuxt, unJS
πŸ‘‰πŸ» Podcast with Daniel Roe about his journey from law to design to development and how he ended up leading the Nuxt core team.
🎧 Wut's Nuxt for Nuxt.js?
πŸ‘‰πŸ» Podcast with Alexander Lichter where he talks about what Nuxt is, how Nuxt helps developers, a conversation around server side rendering, how it's different than PHP, and what's exciting about Nuxt.
πŸ“• How to create beautiful view transitions in Nuxt using the new View Transitions API
πŸ‘‰πŸ» View Transitions API is fantastic addition to freshly introduced web APIs.
πŸ› οΈ Novuel - Open Source AI Writing App
πŸ‘‰πŸ» Novuel is an open-source AI writing application built with Nuxt 3, Nuxt UI, and Novel Vue.
FunCurated Web Development ContentπŸ“• How to use GitHub Copilot: Prompts, tips, and use cases
πŸ‘‰πŸ» Crafting effective prompts is an (sometimes frustrating) art.
πŸ‘‰πŸ» Learn more tips for getting the output you want.
πŸ“• A gentle introduction to static code analysis
πŸ‘‰πŸ» This article goes through static analysis tools and the benefits of static analysis regarding code durability.
πŸ› οΈ Astro 3.0
πŸ‘‰πŸ» An increasingly popular, turbo-charged site generator.
πŸ‘‰πŸ» You can use it with React, Vue, Svelte, Solid, and others.
πŸ› οΈ DevToys
πŸ‘‰πŸ» A Swiss Army knife for developers.
πŸ‘‰πŸ» DevToys helps with daily development tasks like formatting JSON, comparing text, and testing RegExp.
πŸ› οΈ RecipeUI
πŸ‘‰πŸ» RecipeUI is an open-source Postman alternative with type safety built-in.
πŸ‘‰πŸ» It helps you catch your API requests with TypeScript and autocomplete before they fail.
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
Make sure to stay up to date about new features, best articles and tools in the Vue & Nuxt ecosystem by subscribing to the newsletter.Get one email per week | 100% free
I will never share any of your personal data.
Michael ThiessenDan VegaKareem DabbeetAhmed Ragab
Join 2.5K+ other Vue developers
Β© 2023 All rights reserved.