<critical_constraints>
❌ NO <a href=""> → causes full reload, use <Link>
❌ NO axios.post for forms → use useForm from Inertia
❌ NO hardcoded URLs → use route() helper (Ziggy)
✅ MUST use <script setup lang="ts">
✅ MUST detect stack flavor before scaffolding
</critical_constraints>
<inertia_rules> Props: from Laravel Controller, not fetched in onMounted
ts
defineProps<{ user: App.Models.User; errors: Record<string, string> }>();
Links: <Link href="/dashboard"> (not <a>)
Forms:
ts
const form = useForm({ email: '', password: '' });
form.post(route('login'), { onFinish: () => form.reset('password') });
Errors: :error="form.errors.email"
Global state: usePage().props.auth.user
</inertia_rules>
<persistent_layouts>
ts
import AppLayout from '@/Layouts/AppLayout.vue';
defineOptions({ layout: AppLayout });
</persistent_layouts>
<state_management>
- •Local:
ref()for UI state - •Global (Inertia):
usePage()for auth, flash messages - •Complex client-side: Pinia (Setup Store syntax) </state_management>