init

frontend/app/app.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="container">
+    <div>
+      <a data-wml-openURL="https://wails.io">
+        <img src="/wails.png" class="logo" alt="Wails logo"/>
+      </a>
+      <a data-wml-openURL="https://vuejs.org/">
+        <img src="/vue.svg" class="logo vue" alt="Vue logo"/>
+      </a>
+    </div>
+    <HelloWorld msg="Wails + Vue" />
+  </div>
+</template>
+<style scoped>
+@import "../public/style.css";
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #e80000aa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

frontend/app/components/HelloWorld.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import {GreetService} from "../../bindings/changeme";
+import {Events} from "@wailsio/runtime";
+
+const name = ref('')
+const result = ref('Please enter your name below 👇')
+const time = ref('Listening for Time event...')
+
+const doGreet = () => {
+  let localName = name.value;
+  if (!localName) {
+    localName = 'anonymous';
+  }
+  GreetService.Greet(localName).then((resultValue) => {
+    result.value = resultValue;
+  }).catch((err) => {
+    console.log(err);
+  });
+}
+
+onMounted(() => {
+  Events.On('time', (timeValue) => {
+    time.value = timeValue.data;
+  });
+})
+
+defineProps({
+  msg: String,
+})
+
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="result">{{ result }}</div>
+  <div class="card">
+    <div class="input-box">
+      <input class="input" v-model="name" type="text" autocomplete="off"/>
+      <button class="btn" @click="doGreet">Greet</button>
+    </div>
+  </div>
+
+  <div class="footer">
+    <div><p>Click on the Wails logo to learn more</p></div>
+    <div><p>{{ time }}</p></div>
+  </div>
+</template>