Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 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 #80 - Destructure Props in Composition API Without Losing Reactivity #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #80

Destructure Props in Composition API Without Losing Reactivity

Hi ๐Ÿ‘‹

๐Ÿฅณ We reached more than 800 subscribers in this newsletter. Only 200 left for the next big milestone. ๐Ÿฅณ

Last week, I worked a lot on and

I'm planning to try launching on Product Hunt. Let's see how it goes ๐Ÿ˜Š

You can now watch my Vue.js Nation 2023 lightning talk at YouTube.

Have a nice week โ˜€๏ธ

To support me:

Vue Tip: Destructure Props in Composition API Without Losing Reactivity๐Ÿ“บ Watch on YouTube

Inside <script setup> we use the defineProps() compiler macro to access props:

1<script setup lang="ts">
2const props = defineProps<{ count: number }>()

defineProps is a compiler macro and does not need to be imported.

As we all love destructuring objects in JavaScript you might want to try to destructure the props object:

1<script setup lang="ts">
2const { count } = defineProps<{ count: number }>()

When you destructure the props object the reactivity is lost.

By destructuring the props object, the count variable becomes a primitive value (in our case of type number) and is no longer a ref or reactive object.

You can try it yourself in the following StackBlitz demo. Click the "Increment" button multiple times and you will see that the double count value is not updated and always shows 0:

โšก Open Demo

The simplest solution is to access props as props.count in order to retain reactivity:

1<script setup lang="ts">
2import { computed } from 'vue'
4const props = defineProps<{ count: number }>()
5const doubleCount = computed(() => props.count * 2)
8<template>Double Count: {{ doubleCount }}</template>

Try it yourself, now the double count is correctly increased if the "Increment" button is clicked:

โšก Open Demo

If you cannot live without destructuring Vue provides a special helper toRefs:

1<script setup lang="ts">
2import { computed, toRefs } from 'vue'
4const props = defineProps<{ count: number }>()
6const { count } = toRefs(props)
8const doubleCount = computed(() => count.value * 2)
11<template>Double Count: {{ doubleCount }}</template>

toRefs(props) a reactive object (in this example props) to a plain object where each property of the resulting object is a ref pointing to the corresponding property of the original object. We need to use count.value inside the computed property, as it is a ref.

Here's the StackBlitz demo for toRefs:

โšก Open Demo
Curated Vue Content๐Ÿ“• How to Implement Face Recognition in Vue.JS with FaceIO
๐Ÿ‘‰๐Ÿป Houssein introduces Faceioโ€™s Facial recognition authentication.
๐Ÿ‘‰๐Ÿป He is building a simple app to showcase the way to integrate it in a Vue application.
๐Ÿ“• Extending Vue Component Templates

๐Ÿ‘‰๐Ÿป Anthony presents a solution using the HTML template pre-processor Pug in Vue.
๐Ÿ˜ฎ Vue Signals

Evan You built solid style signals in Vue in ~10 lines
๐Ÿ› ๏ธ Real Pokedex

๐Ÿ‘‰๐Ÿป Made with Vue 3
Quote of the weekCurated Web Development Content๐Ÿ“• You May Not Need Lodash or Underscore

๐Ÿ‘‰๐Ÿป This extensive document provides plain JavaScript alternatives to almost 100 different functions youโ€™d find in popular utility libraries like Lodash and Underscore.
๐Ÿ“• Compress An Image Before Upload With JavaScript

๐Ÿ‘‰๐Ÿป Rik Schennink explains in this article how to compress images with JavaScript and save them back to the file input ready for upload.
๐Ÿ“• Fighting Distraction With Unit Tests

๐Ÿ‘‰๐Ÿป "Rather than writing a whole smattering of tests and then coding until they all pass, TLD (Test Led Development) focuses on ping-ponging between test and code."
๐Ÿ˜ฎ Play Counter-Strike 1.6 in your browser

๐Ÿ‘‰๐Ÿป Without Steam, third-party servers and complex registrations, you can remember your youth and play Counter-Strike 1.6 literally from any computer with Internet access.
๐Ÿ› ๏ธ gitmoji

๐Ÿ‘‰๐Ÿป Gitmoji is an initiative to standardize and explain the use of emojis on GitHub commit messages for easier identification of the purpose of a commit.
๐Ÿ› ๏ธ
๐Ÿ‘‰๐Ÿป is a developer-first Zapier alternative.
๐Ÿ‘‰๐Ÿป It makes it easy for developers to create event-driven background tasks.
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.
I will never share any of your personal data.
ยฉ 2023 All rights reserved.