View profile

Weekly Vue News - #62 - Expose properties in a script setup component

Michael Hoffmann
Michael Hoffmann
Hi πŸ‘‹
last Tuesday I attended the vuejs.de conference in Berlin and I really enjoyed it.
My favorite talks of the conference:
1️⃣ Vitest or Cypress? Why not both?! Tools and Practices for Good Tests (by Markus Oberlehner)
πŸ‘‰πŸ» This talk blew my mind. Markus showed how it is possible to run 1000+ E2E tests in less than 20 seconds using Vitest.
2️⃣ Building for the Edge with Nuxt 3 (live coding) (by Daniel Roe)
πŸ‘‰πŸ» Daniel is a world class speaker and his talk showed not only the best features of Nuxt 3 but also some upcoming RC12 features which are hot!
3️⃣ Stop writing your own routes (by Eduardo San Martin Morote)
πŸ‘‰πŸ» Eduardo explained why we should not write our own routes but use alternatives like Nuxt does it by using the file system
β€”
This week, my plan is to start writing a new blog post about a polite newsletter signup that I have developed for my portfolio website based on Nuxt 3.
Have a great week β˜€οΈ

Vue Tip: Expose properties in a script setup component
Components using Options API or Composition API without <script setup> are open by default.
Only components using <script setup> are closed by default.
If we try to access the public instance of such a component via template ref or $parent chains, it will not expose any of the bindings declared inside the <script setup> block.
We can use the defineExpose compiler macro to explicitly expose properties:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
When a parent gets an instance of Child.vue via template ref, the retrieved instance will be of the shape { foo: string, bar: string } (refs are automatically unwrapped just like on normal instances):
Image created with CodeSnap.dev
Image created with CodeSnap.dev
Curated Vue Content
JavaScript Tip: Swap variables
Image created with CodeSnap.dev
Image created with CodeSnap.dev
We use JavaScript destructuring to swap them
The code creates an array of [foo, bar and immediately destructures them into the opposite variables.
Now you see why we use let instead of const here, because we’re actually updating the values of these variables.
Curated Web Development Content
Quote of the Week
Did you enjoy this issue? Yes No
Michael Hoffmann
Michael Hoffmann @mokkapps

This weekly Vue newsletter gives you high-quality tips and curated content to help you become a Vue.js expert.

Additionally, it provides content about web development topics like TypeScript, JavaScript, HTML5, and CSS3.

Published each Monday since June 2021.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Holzapfelkreuther Straße 19, 81375 Munich, Germany