From dd58e1eb6f2c6a6b0fa190102333e92e2aabaddf Mon Sep 17 00:00:00 2001
From: Nathan De Pachtere <nathan.depachtere@alpsify.com>
Date: Mon, 21 Oct 2024 17:13:31 +0200
Subject: [PATCH 1/3] Add Props typing and code style section

---
 content/1.getting-started/3.contribution.md | 30 +++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/content/1.getting-started/3.contribution.md b/content/1.getting-started/3.contribution.md
index 688fd89..e871edd 100644
--- a/content/1.getting-started/3.contribution.md
+++ b/content/1.getting-started/3.contribution.md
@@ -106,6 +106,36 @@ Your Vue components should adhere to the following structure:
 </style>
 ```
 
+**Props typing and code styling**
+
+Refer to this Vue.js documentation page -> https://vuejs.org/api/sfc-script-setup#type-only-props-emit-declarations
+
+```vue
+<script lang="ts" setup>
+// DON'T ⛔️
+const props = defineProps({
+  whatever: { type: String, required: true },
+  optional: { type: String, default: "default" },
+});
+
+// DO ✅
+interface Props {
+  whatever: string;
+  optional?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), { optional: "default" });
+
+//Or DO ✅ Props destructure (v3.5+)
+interface Props {
+  msg?: string;
+  labels?: string[];
+}
+
+const { msg = "hello", labels = ["one", "two"] } = defineProps<Props>();
+</script>
+```
+
 **Notes:**
 
 - Use `<script lang="ts" setup>` for TypeScript and the Composition API.

From f3caf08bceaf23e3adb4a5da91674e2285b36107 Mon Sep 17 00:00:00 2001
From: Nathan De Pachtere <nathan.depachtere@alpsify.com>
Date: Mon, 21 Oct 2024 17:15:52 +0200
Subject: [PATCH 2/3] Clean wording

---
 content/1.getting-started/3.contribution.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/1.getting-started/3.contribution.md b/content/1.getting-started/3.contribution.md
index e871edd..837d060 100644
--- a/content/1.getting-started/3.contribution.md
+++ b/content/1.getting-started/3.contribution.md
@@ -106,7 +106,7 @@ Your Vue components should adhere to the following structure:
 </style>
 ```
 
-**Props typing and code styling**
+**Props typing and code style**
 
 Refer to this Vue.js documentation page -> https://vuejs.org/api/sfc-script-setup#type-only-props-emit-declarations
 

From 0cebefb19c590e468cb52633d4a098b9587a0f83 Mon Sep 17 00:00:00 2001
From: Nathan De Pachtere <nathan.depachtere@alpsify.com>
Date: Tue, 22 Oct 2024 09:04:10 +0200
Subject: [PATCH 3/3] Convert interfaces to types

---
 content/1.getting-started/3.contribution.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/1.getting-started/3.contribution.md b/content/1.getting-started/3.contribution.md
index 837d060..6fe6385 100644
--- a/content/1.getting-started/3.contribution.md
+++ b/content/1.getting-started/3.contribution.md
@@ -119,18 +119,18 @@ const props = defineProps({
 });
 
 // DO ✅
-interface Props {
+type Props = {
   whatever: string;
   optional?: string;
-}
+};
 
 const props = withDefaults(defineProps<Props>(), { optional: "default" });
 
 //Or DO ✅ Props destructure (v3.5+)
-interface Props {
+type Props = {
   msg?: string;
   labels?: string[];
-}
+};
 
 const { msg = "hello", labels = ["one", "two"] } = defineProps<Props>();
 </script>