Add new home page with navigation and components

khannedy · khannedy · commit dbdb0427b255 · 2024-12-26T10:25:15.000+07:00
Introduce a new "home.html" entry point with a Vue app powered by `HomeApp.vue`. The app includes navigation between "About," "Blog," and "Contact" components. Updated `vite.config.js` to include the new "home" entry.
diff --git a/home.html b/home.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/home.js"></script>
+  </body>
+</html>
diff --git a/src/components/About.vue b/src/components/About.vue
@@ -0,0 +1,14 @@
+<script setup>
+
+</script>
+
+<template>
+  <h1>About</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque exercitationem itaque, porro
+    repellendus tempora ut? A, dolorum fugit magnam molestiae nemo, perferendis perspiciatis praesentium quam veritatis,
+    vero voluptatibus.</p>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Blog.vue b/src/components/Blog.vue
@@ -0,0 +1,14 @@
+<script setup>
+
+</script>
+
+<template>
+  <h1>Blog</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae excepturi molestias repudiandae totam!
+    Aperiam assumenda at, doloremque, hic illo, mollitia natus necessitatibus nesciunt non nulla porro praesentium quod
+    similique.</p>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/HomeApp.vue b/src/components/HomeApp.vue
@@ -0,0 +1,27 @@
+<script setup>
+
+import About from "./About.vue";
+import Blog from "./Blog.vue";
+import Contact from "./Contact.vue";
+import {ref} from "vue";
+
+const currentPage = ref('about');
+
+const pages = {
+  about: About,
+  blog: Blog,
+  contact: Contact
+}
+</script>
+
+<template>
+  <button @click="currentPage = 'about'">About</button>
+  <button @click="currentPage = 'blog'">Blog</button>
+  <button @click="currentPage = 'contact'">Contact</button>
+
+  <component :is="pages[currentPage]"/>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/home.js b/src/home.js
@@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import HomeApp from "./components/HomeApp.vue";
+
+createApp(HomeApp).mount("#app");
diff --git a/vite.config.js b/vite.config.js
@@ -18,6 +18,7 @@ export default defineConfig({
                 product: "product.html",
                 note: "note.html",
                 button: "button.html",
+                home: "home.html",
             }
         }
     }

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