<script setup lang="ts">
import { ref } from 'vue'

const name = ref('Unknown')

const getName = async () => {
  const res = await fetch('/api/')
  const data = await res.json()
  name.value = data.name
}
</script>

<template>
  <div>
    <h1>You did it!</h1>
    <p>
      Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
      documentation
    </p>
    <button class="green" @click="getName" aria-label="get name">
      Name from API is: {{ name }}
    </button>
  </div>

  <DynamicDialog /> <ConfirmDialog /> <Toast />
  <RouterView />
</template>

<style scoped></style>
