**Add 'Say Hello' feature with Vue component setup**

khannedy · khannedy · commit 14b57ca924f5 · 2024-12-24T23:17:35.000+07:00
Introduced a new "Say Hello" feature, including an HTML entry point, Vue components, and reactive state management. Updated `vite.config.js` to include the new `say-hello.html` entry. This feature demonstrates name input, reactivity, and a counter functionality.
diff --git a/say-hello.html b/say-hello.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/say-hello.js"></script>
+  </body>
+</html>
diff --git a/src/components/SayHello.vue b/src/components/SayHello.vue
@@ -0,0 +1,39 @@
+<script setup>
+import {computed, reactive, ref} from "vue";
+
+const person = reactive({
+  firstName: "",
+  lastName: ""
+})
+
+function sayHello(){
+  person.firstName = document.getElementById("firstName").value;
+  person.lastName = document.getElementById("lastName").value;
+}
+
+const fullName = computed((oldName) => {
+  console.log(`change old name ${oldName}`);
+  return `${person.firstName} ${person.lastName}`;
+})
+
+const counter = ref(0);
+
+function increment(){
+  console.log(`increment called`);
+  counter.value++;
+}
+</script>
+
+<template>
+  <div>
+    <button v-on:click="increment">Increment {{counter}}</button> <br>
+    <input placeholder="First Name" type="text" id="firstName"> <br>
+    <input placeholder="Last Name" type="text" id="lastName"> <br>
+    <button v-on:click="sayHello">Say Hello</button>
+  </div>
+  <h1>Hello {{ fullName }}</h1>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/say-hello.js b/src/say-hello.js
@@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import SayHello from "./components/SayHello.vue";
+
+createApp(SayHello).mount("#app");
diff --git a/vite.config.js b/vite.config.js
@@ -10,6 +10,7 @@ export default defineConfig({
                 index: "index.html",
                 hello: "hello.html",
                 counter: "counter.html",
+                say_hello: "say-hello.html",
             }
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ export default defineConfig({`
`10`	`10`	`index: "index.html",`
`11`	`11`	`hello: "hello.html",`
`12`	`12`	`counter: "counter.html",`
	`13`	`+ say_hello: "say-hello.html",`
`13`	`14`	`}`
`14`	`15`	`}`
`15`	`16`	`}`