Add a new counter feature with Vue component setup

khannedy · khannedy · commit 49a8fb49a61a · 2024-12-24T22:37:25.000+07:00
Introduce a basic counter application using Vue, including a new HTML entry point (`counter.html`), a JavaScript module (`counter.js`), and a Vue component (`Counter.vue`). Also update `vite.config.js` to include the new entry point.
diff --git a/counter.html b/counter.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/counter.js"></script>
+  </body>
+</html>
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
@@ -0,0 +1,40 @@
+<script setup>
+import {nextTick, ref} from "vue";
+
+console.info(`Load component`);
+let counter = ref({
+  count: 0,
+  name: "Eko"
+});
+
+async function increment(){
+  console.info(`Increment counter : ${counter.value.count}`);
+  counter.value = {
+    name: counter.value.name,
+    count: counter.value.count + 1
+  };
+
+  await nextTick();
+
+  counter.value.count++;
+
+  await nextTick();
+
+  counter.value.count++;
+
+  await nextTick();
+
+  console.log("Increment count after nextTick");
+}
+</script>
+
+<template>
+  <div>
+    <h1 id="count">Counter {{counter.name}} : {{counter.count}}</h1>
+    <button v-on:click="increment">Increment</button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/counter.js b/src/counter.js
@@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import Counter from "./components/Counter.vue";
+
+createApp(Counter).mount("#app");
diff --git a/vite.config.js b/vite.config.js
@@ -9,6 +9,7 @@ export default defineConfig({
             input: {
                 index: "index.html",
                 hello: "hello.html",
+                counter: "counter.html",
             }
         }
     }

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