content: add context sample for vue3 (#151)

content: checking context for vue3

content: Changes for content Vue

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

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>

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>