🎉 Initial commit

frontend/src/App.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <a wml-openURL="https://wails.io">
+        <img src="/wails.png" class="logo" alt="Wails logo"/>
+      </a>
+      <a 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>
+.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/src/components/HelloWorld.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import {GreetService} from "../../bindings/changeme";
+import {Events} from "@wailsio/runtime";
+
+defineProps<{ msg: string }>()
+
+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: string) => {
+    result.value = resultValue;
+  }).catch((err: Error) => {
+    console.log(err);
+  });
+}
+
+onMounted(() => {
+  Events.On('time', (timeValue: { data: string }) => {
+    time.value = timeValue.data;
+  });
+})
+
+</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>

frontend/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />