Code-Create/src/pages/my-account/register.vue

<template>
	<div class="register">
		<h2>Register</h2>
		<form @submit.prevent="handleSubmit">
			<div class="form-item">
				<label for="username">Username</label>
				<input
					type="username"
					id="username"
					name="username"
					required
					v-model="fromData.username"
				/>
			</div>
			<div class="form-item">
				<label for="email">Email address</label>
				<input type="email" id="email" name="email" required v-model="fromData.email" />
			</div>
			<div class="form-item">
				<label for="password">Password</label>
				<div class="input-container">
					<input
						id="password"
						name="password"
						required
						:type="passShow ? 'text' : 'password'"
						v-model="fromData.password"
					/>
					<span
						class="iconfont"
						:class="[passShow ? 'icon-hide' : 'icon-show']"
						@click="passShow = !passShow"
					></span>
				</div>
			</div>
			<div class="subscribe">
				<input
					type="checkbox"
					id="subscribe"
					name="subscribe"
					v-model="fromData.subscribe"
				/>
				<label for="subscribe"
					>Subscribe to Code Create product/service news and newsletter</label
				>
			</div>
			<div class="tip">
				Your personal data will be used to support your experience throughout this website,
				to manage access to your account, and for other purposes described in our
				<router-link class="link" to="/my-account/privacy-policy"
					>Privacy Policy</router-link
				>
			</div>
			<button type="submit" custom>REGISTER</button>
		</form>
	</div>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	import { useUserInfoStore } from '@/stores/userInfo'
	const userInfoStore = useUserInfoStore()
	const passShow = ref(false)
	const remember = ref(false)
	const fromData = ref({
		username: '',
		email: '',
		password: '',
		subscribe: false
	})

	const handleSubmit = () => {
		console.log(fromData.value, remember.value)
	}
</script>

<style scoped lang="less">
	@import './less/style.less';
</style>