Weekly Vue News #132

Unlocking the Power of v-for Loops

View online

Hi 👋

This week, I have no personal news to share. I hope you enjoy the content I've curated for you.

Have a nice week ☀️

Unlocking the Power of v-for Loops in Vue With These Useful Tips

In this article, I will show you some valuable tips and tricks to get the most out of the v-forv-for directive.

Vue

📕 SSR Safe Dynamic IDs in Vue

👉🏻 Dynamic IDs are useful for testing, but can get tricky with SSR.

👉🏻 Michael explains how to create a directive to do this easily, in both vanilla Vue and in Nuxt.

📕 Lazy Hydration and Server Components in Nuxt – Vue 3 Performance

👉🏻 Filip explains in this article: "Lazy Hydration is a powerful technique that could significantly reduce your Time to Interactive and First Input delay metric."

📕 Vue 3 Reactivity System Is Brilliant! Here's How It Works - Part 1

👉🏻 Ahmed explains Vue 3's reactivity system.

Nuxt

📕 Introducing @nx/nuxt: Enhanced Nuxt.js Support in Nx

Using Nx with your Nuxt projects presents the following advantages:

👉🏻 Monorepo Management

👉🏻 Modular Development

👉🏻 Enhanced Caching

👉🏻 Nx generators

👉🏻 Automated upgrades

📕 Zod and Query String Variables in Nuxt

👉🏻 Daniel reminds us that it's important to validate the payloads of POST requests to our API endpoints and Zod makes this super easy to do.

📕 Managing Permissions with Permit.io in Nuxt 3 & Node.js

👉🏻 Guillaume demonstrates how to create an application with Nuxt 3 and use Permit.io as a permission management tool.

📹 Nuxt Tips: Server Rendering and Global State

👉🏻 In this video, Daniel covers why and how you might have a hydration error when using and setting global state.

📹 Class Serialization with SSR in Nuxt - no more POJO error messages!

👉🏻 Alexander explains he most common problem when using classes and how to resolve it with in-house features in Nuxt.

📅 Events

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

Vueconf US 2024

👉🏻 22 - 24 May 2024, New Orleans, US

💬 Quote of the week

🔥 Vue Tip: Unlocking the Power of v-for Loops

Looping through arrays and objects is a common task in Vue applications. The v-forv-for directive is the perfect tool for this job. It is mighty, and you can use it in many different ways.

You can read all the tips in my latest blog post. Let me show you one of my favorite tips in this issue.

The v-forv-for directive supports two different delimiters: inin and ofof. The inin delimiter is the default one. I prefer to use the ofof delimiter for arrays because it is closer to JavaScript's syntax for iterators like in the for...offor...of loop:

1<script setup lang="ts">  2import { ref } from 'vue'  3  4const items = ref([  5  { id: 'a-1', name: 'Apple' },  6  { id: 'b-1', name: 'Mango' },  7  { id: 'c-1', name: 'Banana' },  8])  9</script>  10  11<template>  12  <ul>  13    <li v-for="item of items">  14      {{ item.name }}  15    </li>  16  </ul>  17</template>

If I want to loop through an object, I use the inin delimiter because it is closer to JavaScript's syntax for iterating over object properties:

1<script setup>  2import { ref } from 'vue'  3  4const myObject = ref({  5  title: 'How to do lists in Vue',  6  author: 'Jane Doe',  7  publishedAt: '2016-04-10',  8})  9</script>  10  11<template>  12  <ul>  13    <li v-for="(value, key) in myObject">  14      Key: "{{ key }}", Value: "{{ value }}"  15    </li>  16  </ul>  17</template>