Weekly Vue News - #62 - Expose properties in a script setup component
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
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
Curated Vue Content
📕 Implementing Dark Mode with VueUse
👉🏻 In this article, David is taking a look at how to add dark mode to a Vue application using the VueUse composable: useDark
👉🏻 A fast, composable, unstyled Command Palette for Vue.
👉🏻 A browser extension and library that can open UI component code in an IDE with a click.
👉🏻 It is made for React, Preact, Solid, Vue, and Svelte.
JavaScript Tip: Swap variables
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
📕 The Future of the Web is on the Edge
👉🏻 Hosting apps on the edge means that they will always be close to users.
📕 Announcing TypeScript 4.9 Beta
👉🏻 Introduces the satisfies operator for when you want to validate a type of an expression matches some type but without changing the actual resulting type.
📕 Beginner's TypeScript Tutorial
In this hands-on interactive TypeScript tutorial you will:
👉🏻 Learn to type variables, functions, and errors
👉🏻 Become familiar with the TypeScript documentation
👉🏻 Gain experience with modern TypeScript tooling
🛠️ 58 bytes of CSS to look great nearly everywhere
👉🏻 This GitHub gist contains two snippets of CSS code designed to make websites look good on most displays.
👉🏻 Amazing macOS app to take beautiful screenshots instantly.
Quote of the Week
