some frontend

resources/js/App.vue

@@ -1,13 +1,44 @@
 <script setup lang="ts">
     import Footer from "./components/Footer.vue";
+
+    import type { NavigationMenuItem } from '@nuxt/ui'
+    import { computed } from 'vue'
+    import { useHead } from '@unhead/vue'
+
+    const items: NavigationMenuItem[] = [{
+        label: 'Git',
+        to: 'https://gitea.sc0tt.org/Belupeti/tla',
+        target: '_blank'
+    }, {
+        label: 'Home',
+        to: 'https://sc0tt.org',
+        target: '_blank'
+    }, 
+    ]
 </script>
 
 <template>
-    <main>
-    <router-view v-slot="{ Component,route }">
-        <component :is="Component" />
-    </router-view>
-    </main>
 
-    <Footer>Scott 0-val</Footer>
+    <UApp>
+    <UMain>
+        <NuxtLayout>
+            <router-view v-slot="{ Component,route }">
+                <component :is="Component" />
+            </router-view>
+        </NuxtLayout>
+    </UMain> 
+
+        <UFooter>
+      <template #left>
+        <UNavigationMenu :items="items" variant="link" />
+      </template>
+        <p class="text-muted text-sm">
+          Sc0tt © {{ new Date().getFullYear() }}
+        </p>
+
+      <template #right>
+        
+      </template>
+    </UFooter>
+    </UApp>
 </template>

resources/js/app.js

@@ -2,7 +2,13 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import '../css/app.css'
+import ui from '@nuxt/ui/vue-plugin'
+import { createHead } from '@unhead/vue/client'
+
+const head = createHead()
 
 createApp(App)
 .use(router)
+.use(head)
+.use(ui)
 .mount('#app');

resources/js/pages/HomeView.vue

@@ -1,7 +1,53 @@
 <script lang="ts">
-  import vue from '@vitejs/plugin-vue'
+  import vue from '@vitejs/plugin-vue';
+  import type { FormSubmitEvent } from '@nuxt/ui';
+  import axios from 'axios';
+
+  export default {
+    data() {
+      return {
+        hint: '',
+        guesses: [],
+      };
+    },
+    
+    mounted () {
+      axios
+        .get('/api/fetch_tla/en')
+        .then(response => {
+          this.hint = response.data.hint;
+          this.guesses = response.data.guesses;
+        });
+    } 
+  }
+
+  async function onSubmit(event: FormSubmitEvent<Schema>) {
+    console.log(event.data)
+  }
+  
 </script>
 
 <template>
-  asdfsadfsadf
-</template>
+  <UCard>
+    <template #header>
+      {{ this.hint }}
+    </template>
+
+      <template v-for="guess in guesses">
+        {{ guess }}
+      </template>
+
+    <template #footer>
+      <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+          <UInput
+            placeholder="Three Letter Abbreviation"
+          />
+
+        <UButton type="submit">
+          Submit
+        </UButton>
+      </UForm>
+
+    </template>
+  </UCard>
+</template>