next/pages/auth/login.vue

<script lang="ts" setup>
	import { ref, reactive } from "vue";
	import useApiFetch from "../../composables/useApiFetch";
	import { notification } from "ant-design-vue";
	interface FormState {
		username: string;
		password: string;
	}
	definePageMeta({
		auth: {
			unauthenticatedOnly: true,
			navigateAuthenticatedTo: "/",
		},
	});

	const formState = reactive<FormState>({
		username: "",
		password: "",
	});

	const onFinish = async (values: any) => {
		const { signIn, data } = useAuth();

		let reso: any;
		try {
			reso = await signIn(values);
		} catch (e: any) {
			if (e.data) {
				notification["error"]({
					message: h("div", { innerHTML: e.data.message }),
				});
			}
		}

		await navigateTo({
			path: "/",
		});
	};
</script>
<template>
	<a-form
		:model="formState"
		name="basic"
		:label-col="{ span: 8 }"
		autocomplete="off"
		:colon="false"
		layout="vertical"
		@finish="onFinish"
	>
		<a-form-item
			label="Username"
			name="username"
			:rules="[{ required: true, message: 'Username required!' }]"
		>
			<a-input v-model:value="formState.username" />
		</a-form-item>
		<a-form-item
			:colon="false"
			label="Password"
			name="password"
			:rules="[{ required: true, message: 'Password required!' }]"
		>
			<a-input-password v-model:value="formState.password" />
		</a-form-item>
		<a-form-item>
			<a-row :justify="'center'" :align="'middle'">
				<a-col>
					<a-button type="primary" html-type="submit">Log in</a-button>
				</a-col>
			</a-row>
		</a-form-item>
	</a-form>
</template>