From 6dd15a36e4f2e9e751f66e878afa5893dccdfe19 Mon Sep 17 00:00:00 2001
From: ismailassa <ismailassakali20@gmail.com>
Date: Fri, 10 Feb 2023 12:11:20 +0100
Subject: [PATCH] content: add context sample for vue3 (#151)

content: checking context for vue3

content: Changes for content Vue
---
 README.md                                     |  2 +-
 .../5-context/vue3/App.vue                    | 21 +++++++++++++++++++
 .../5-context/vue3/UserProfile.vue            | 15 +++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 content/4-component-composition/5-context/vue3/App.vue
 create mode 100644 content/4-component-composition/5-context/vue3/UserProfile.vue

diff --git a/README.md b/README.md
index 6be5bd8..a726558 100644
--- a/README.md
+++ b/README.md
@@ -110,7 +110,7 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox
diff --git a/content/4-component-composition/5-context/vue3/App.vue b/content/4-component-composition/5-context/vue3/App.vue
new file mode 100644
index 0000000..bd47c30
--- /dev/null
+++ b/content/4-component-composition/5-context/vue3/App.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { ref, provide } from "vue";
+import UserProfile from "./UserProfile.vue";
+
+const user = ref({
+  id: 1,
+  username: "unicorn42",
+  email: "unicorn42@example.com",
+});
+
+function updateUsername(username) {
+  user.value.username = username;
+}
+
+provide("user", { user, updateUsername });
+</script>
+
+<template>
+  <h1>Welcome back, {{ user.username }}</h1>
+  <UserProfile />
+</template>
diff --git a/content/4-component-composition/5-context/vue3/UserProfile.vue b/content/4-component-composition/5-context/vue3/UserProfile.vue
new file mode 100644
index 0000000..31e2322
--- /dev/null
+++ b/content/4-component-composition/5-context/vue3/UserProfile.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { inject } from "vue";
+const { user, updateUsername } = inject("user");
+</script>
+
+<template>
+  <div>
+    <h2>My Profile</h2>
+    <p>Username: {{ user.username }}</p>
+    <p>Email: {{ user.email }}</p>
+    <button @click="() => updateUsername('Jane')">
+      Update username to Jane
+    </button>
+  </div>
+</template>