opnform-host-nginx/client/pages/settings/profile.vue

<template>
  <div>
    <h3 class="font-semibold text-2xl text-gray-900">
      Profile details
    </h3>
    <small class="text-gray-600">Update your username and manage your account details.</small>

    <form
      class="mt-3"
      @submit.prevent="update"
      @keydown="form.onKeydown($event)"
    >
      <!-- Name -->
      <text-input
        name="name"
        :form="form"
        label="Name"
        :required="true"
      />

      <!-- Email -->
      <text-input
        name="email"
        :form="form"
        label="Email"
        :required="true"
      />

      <!-- Submit Button -->
      <v-button
        :loading="form.busy"
        class="mt-4"
      >
        Save changes
      </v-button>
    </form>
  </div>
</template>

<script setup>
const authStore = useAuthStore()
const user = computed(() => authStore.user)

useOpnSeoMeta({
  title: "Profile",
})
definePageMeta({
  middleware: "auth",
})

const form = useForm({
  name: "",
  email: "",
})

const update = () => {
  form.patch("/settings/profile").then((response) => {
    authStore.updateUser(response)
    useAlert().success("Your info has been updated!")
  })
}

onBeforeMount(() => {
  // Fill the form with user data.
  form.keys().forEach((key) => {
    form[key] = user.value[key]
  })
})
</script>