Add profile page with Vue components and functionality

khannedy · khannedy · commit 0a7432541687 · 2024-12-26T10:39:25.000+07:00
Introduce a new profile page with Vue-based components. The profile includes reactive state management for name and email using `provide` and `inject`, along with a profile address subcomponent. Update Vite configuration to include the new profile entry point.
diff --git a/profile.html b/profile.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/profile.js"></script>
+  </body>
+</html>
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
@@ -0,0 +1,15 @@
+<script setup>
+import {inject} from "vue";
+
+const profile = inject("profile");
+</script>
+
+<template>
+  <h1>Profile</h1>
+  <p>Name : {{ profile.name }}</p>
+  <p>Email : {{ profile.email }}</p>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ProfileAddress.vue b/src/components/ProfileAddress.vue
@@ -0,0 +1,14 @@
+<script setup>
+import {inject} from "vue";
+
+const profile = inject("profile");
+</script>
+
+<template>
+  <h1>Profile Address : {{ profile.name }}</h1>
+  <p>Address ...</p>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ProfileApp.vue b/src/components/ProfileApp.vue
@@ -0,0 +1,22 @@
+<script setup>
+import {provide, reactive} from "vue";
+import ProfileAddress from "./ProfileAddress.vue";
+import Profile from "./Profile.vue";
+
+const profile = reactive({
+  name: "Eko",
+  email: "eko@test.com"
+})
+
+provide("profile", profile);
+</script>
+
+<template>
+  <input v-model="profile.name" type="text" placeholder="Name"/>
+  <Profile/>
+  <ProfileAddress/>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/profile.js b/src/profile.js
@@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import ProfileApp from "./components/ProfileApp.vue";
+
+createApp(ProfileApp).mount("#app");
diff --git a/vite.config.js b/vite.config.js
@@ -19,6 +19,7 @@ export default defineConfig({
                 note: "note.html",
                 button: "button.html",
                 home: "home.html",
+                profile: "profile.html",
             }
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export default defineConfig({`
`19`	`19`	`note: "note.html",`
`20`	`20`	`button: "button.html",`
`21`	`21`	`home: "home.html",`
	`22`	`+ profile: "profile.html",`
`22`	`23`	`}`
`23`	`24`	`}`
`24`	`25`	`}`