Lifting up the State

<!-- views/businessCardEditor/BusinessCardEditor.vue -->
<template>
	<div class="p-8 container mx-auto grid grid-cols-2 gap-8">
		<BusinessCardForm />
	</div>
</template>
<script>
	import BusinessCardForm from "./components/BusinessCardForm";
export default {
	components: {
		BusinessCardForm,
	},
}; 
</script>

<!-- views/businessCardEditor/components/BusinessCardForm.vue -->
<template>
	<div class="shadow-md p-8">
		<h2 class="text-2xl font-semibold mb-4">Business Card Form</h2>
		<form>
			<div :class="$style.formBlock">
				<label :class="$style.formLabel">Avatar</label>
				<input type="file" @change="onFileUpload" />
			</div>
			<div :class="$style.formBlock">
				<label :class="$style.formLabel">Name</label>
				<input :class="$style.formInput" type="text" v-model="name" />
			</div>
			<div :class="$style.formBlock">
				<label :class="$style.formLabel">Description</label>
				<input :class="$style.formInput" type="text" v-model="description" />
			</div>
			<div :class="$style.formBlock">
				<label :class="$style.formLabel">Phone number</label>
				<input :class="$style.formInput" type="text" v-model="phoneNumber" />
			</div>
			<div :class="$style.formBlock">
				<label :class="$style.formLabel">Address</label>
				<input :class="$style.formInput" type="text" v-model="address" />
			</div>
		</form>
	</div>
</template>
<script>
	export default {
	data() {
			return {
				avatarFile: null,
				name: "",
				phoneNumber: "",
				description: "",
				address: "",
			};
		},
		methods: {
			onFileUpload(e) {
				this.avatarFile = e.target.files ? .[0];
			},
		},
};
</script>
<style module>
	.formBlock {
		@apply flex flex-col mb-6;
	}
	.formLabel {
		@apply mb-3 font-semibold;
	}
	.formInput {
		@apply border border-gray-50 shadow p-4;
	}
</style>

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home";
import BusinessCardEditor from "../views/businessCardEditor/BusinessCardEditor.vue";
const routes = [
  {
	path: "/",
	name: "Home",
	component: Home,
   }, 
   {
	path: "/business-card-editor",
	name: "BusinessCardEditor",
	component: BusinessCardEditor,
    }, 
];
const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes,
});
export default router;