# Fe Build Vue
> Vue 3/Nuxt 3 요구사항을 받아 사내 원칙대로 구현. 명세→체크리스트→테스트 매핑 강제, Composition API + `
```
### 2.2 데이터 페칭 (Nuxt)
```ts
// 페이지 진입 시 — SSR + hydration 일관
const { data: order, error } = await useFetch(`/api/orders/${route.params.id}`, {
key: `order-${route.params.id}`,
});
// 이벤트 핸들러
async function onSubmit() {
const res = await $fetch('/api/orders', { method: 'POST', body: form.value });
await refreshCookie('order-list'); // 또는 router.push
}
```
### 2.3 폼
- 단순: `ref` + `v-model` + `@submit.prevent`
- 복잡: VeeValidate + zod 또는 Vue 3 + `@vue/reactivity` 기반 폼 라이브러리
- **검증 규칙에 optional 분기 명시** — `z.string().optional()`
### 2.4 상태
- 컴포넌트 로컬: `ref`/`computed`
- 공유 로직: composable (`useOrder.ts`)
- 글로벌: Pinia setup store (`defineStore('order', () => {...})`)
- URL 단일 진실: `useRoute().query` + `navigateTo({ query: ... })`
### 2.5 접근성 디폴트
- 폼: `