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 CodeSnap.dev and weekly-vue.news.

I'm planning to try launching CodeSnap.dev on Product Hunt. Let's see how it goes 😊

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

To support me:

😘 Recommend the newsletter to your friends: it really helps!
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Have a nice week ☀️

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:


    <script setup lang="ts">
    

    const props = defineProps<{ count: number }>()
    

    </script>

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:


    <script setup lang="ts">
    

    const { count } = defineProps<{ count: number }>()
    

    </script>

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:


    <script setup lang="ts">
    

    import { computed } from 'vue'
    

    
    

    const props = defineProps<{ count: number }>()
    

    const doubleCount = computed(() => props.count * 2)
    

    </script>
    

    
    

    <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:


    <script setup lang="ts">
    

    import { computed, toRefs } from 'vue'
    

    
    

    const props = defineProps<{ name: string }>()
    

    
    

    const { count } = toRefs(props)
    

    
    

    const doubleCount = computed(() => count.value * 2)
    

    </script>
    

    
    

    <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 name.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.

hackernoon.com

📕 Extending Vue Component Templates

👉🏻 Anthony presents a solution using the HTML template pre-processor Pug in Vue.

medium.com

😮 Vue Signals

Evan You built solid style signals in Vue in ~10 lines

sfc.vuejs.org

🛠️ Real Pokedex

👉🏻 Made with Vue 3

realpokedex.com

Quote of the week

Curated 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.

github.com

📕 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.

pqina.nl

📕 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."

matthewc.dev

😮 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.

play-cs.com

🛠️ 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.

github.com

🛠️ Trigger.dev

👉🏻 Trigger.dev is a developer-first Zapier alternative.

👉🏻 It makes it easy for developers to create event-driven background tasks.

github.com

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via

Facebook

Twitter

Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany