From 4183871a7520e9983db731704010d4c1fae6a4e9 Mon Sep 17 00:00:00 2001
From: teykamp <thomas@eykamp.com>
Date: Thu, 19 Sep 2024 04:45:02 -0400
Subject: [PATCH] Added v-cloak and v-slot content on Vue roadmap (#7161)

* Add v-cloak description

Added v-cloak content in Vue roadmap

* Add v-slot description

Added v-slot content in Vue roadmap
---
 .../content/v-cloak@RrSekP8Ub01coegMwLP6a.md  | 23 ++++++++++++++++-
 .../content/v-slot@m9pQ3daR3KiwRATcQysHA.md   | 25 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/data/roadmaps/vue/content/v-cloak@RrSekP8Ub01coegMwLP6a.md b/src/data/roadmaps/vue/content/v-cloak@RrSekP8Ub01coegMwLP6a.md
index 733c98f6f..966de79e6 100644
--- a/src/data/roadmaps/vue/content/v-cloak@RrSekP8Ub01coegMwLP6a.md
+++ b/src/data/roadmaps/vue/content/v-cloak@RrSekP8Ub01coegMwLP6a.md
@@ -1 +1,22 @@
-# v-cloak
\ No newline at end of file
+# v-cloak
+
+The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template
+
+The v-cloak directive remains until the component instance is mounted.
+```vue
+<div v-cloak>
+  {{ message }}
+</div>
+```
+
+Combined with CSS, you can hide elements with v-cloak until they are ready.
+```css
+[v-cloak] {
+  display: none;
+}
+```
+The `<div>` will not be visible until the compilation is done.
+
+Visit the following resources to learn more:
+
+- [@official@v-cloak documentation](https://vuejs.org/api/built-in-directives.html#v-cloak)
diff --git a/src/data/roadmaps/vue/content/v-slot@m9pQ3daR3KiwRATcQysHA.md b/src/data/roadmaps/vue/content/v-slot@m9pQ3daR3KiwRATcQysHA.md
index a72872956..16cec54b7 100644
--- a/src/data/roadmaps/vue/content/v-slot@m9pQ3daR3KiwRATcQysHA.md
+++ b/src/data/roadmaps/vue/content/v-slot@m9pQ3daR3KiwRATcQysHA.md
@@ -1 +1,24 @@
-# v-slot
\ No newline at end of file
+# v-slot
+
+The v-slot directive to define slots in components, allowing you to pass and render content dynamically inside a component.
+
+For named slots, you use v-slot with a specific slot name. This lets you pass different content to different parts of a component:
+
+```vue
+<template>
+  <custom-component>
+    <template v-slot:header>
+      <h1>Header Content</h1>
+    </template>
+    <template v-slot:footer>
+      <p>Footer Content</p>
+    </template>
+  </custom-component>
+</template>
+```
+
+The shorthand for `v-slot` is `#`, for example `v-slot:header` becomes `#header`.
+
+Visit the following resources to learn more:
+
+- [@official@v-slot documentation](https://vuejs.org/api/built-in-directives.html#v-slot)