Weekly Vue News #124 - Document Your Component Props Using JSDoc

Weekly Vue News #124

Document Your Component Props Using JSDoc

Hi 👋

Christmas is just around the corner, and I'm looking forward to spending time with my family and friends. I hope you can also take some time off and relax.

Of course, you can still expect a new issue of this newsletter each week 🤓.

Have a lovely week ☀️

To support me:

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

Vue

📕 Intuitive Vue Console Logging for Reactive Objects

👉🏻 This article will introduce how to use Chrome's custom formatters feature to make reactive objects (like ref, reactive) appear clearer in the console.

serko.dev

📕 Top 5 mistakes to avoid when using Pinia

👉🏻 This article provides some common mistakes when using Pinia and how to fix them.

masteringpinia.com

📕 A simple Vue form validation composable with Zod

👉🏻 In this article, you'll see how to create a simple Vue composable for form validation with just a few lines of code

👉🏻 The composable uses Zod under the hood to validate form data.

dev.to

📕 NativeScript-Vue unit testing with Vitest

👉🏻 NativeScript (NS) is a framework for building native applications using JS/TS which can be combined with Vue.

👉🏻 Learn how to use Vitest to unit test your NativeScript-Vue app.

blog.nativescript.org

📹 Weird HTML comments when using Vue or Nuxt?

👉🏻 In this video, Alexander explains why some weird HTML comments exist.

👉🏻 He also explains if you can remove them and whether they hurt performance or not!.

www.youtube.com

Nuxt

📕 Understanding and Measuring Nuxt Performance – Vue.js 3 Performance

In this article, Filip answers some fundamental questions about performance:

👉🏻 What is does it mean that your app is "fast"?

👉🏻 What metrics should we optimize?

👉🏻 and more...

vueschool.io

📕 Custom Error Pages in Nuxt 3

👉🏻 This article dives into how to create a custom error page for Nuxt 3 applications to replace Nuxt 3's built in error page.

masteringnuxt.com

🛠️ Nuxt Templates

👉🏻 Nuxt now provides a list of community templates that can help you get up and running in a new application in a few seconds.

nuxt.com

🛠️ Rapid Launch

👉🏻 A Nuxt boilerplate project that helps to create landing pages faster.

👉🏻 Currently in beta.

rapidlaunch.it

📅 Events

Vue.js Nation Conference

👉🏻 24 - 25 January 2024, Online Live Event

👉🏻 100% free

vuejsnation.com

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

Vueconf US 2024

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

vueconf.us

💬 Quote of the week

🔥 Vue Tip: Document Your Component Props Using JSDoc

It can be useful to document your component props so that they show up when you hover over the component in your IDE. You can do this using JSDoc in the TypeScript interface that you pass to the defineProps function:

MyComponent.vue

            1 <script setup lang="ts">
              2 export interface Props {
              3   /** The name of the user. */
              4   name: string
              5   /** The age of the user. */
              6   age: number
              7 }
              8 defineProps<Props>()
              9 </script>

It's also possible to document the props in the defineProps function:

MyComponent.vue

            1 <script setup lang="ts">
              2 defineProps<{
              3   /** The name of the user. */
              4   name: string
              5   /** The age of the user. */
              6   age: number
              7 }>()
              8 </script>

If you hover over the prop name in your IDE, you should see the documentation:

Screenshot of the prop documentation in VS Code

😂 Fun

🧑🏻‍💻 In Other News

📕 Examples of Great URL Design

👉🏻 Jim discusses the importance of thoughtful URL design, showcasing how URLs can be more than just web addresses.

blog.jim-nielsen.com

📕 TypeHero

👉🏻 A community and platform for TypeScript developers that aims to educate and clear up confusion about the intricacies of TypeScript's typing system.

👉🏻 It provides challenges for developers to test their TypeScript skills.

github.com