ask-vue-architect

<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

defineProps<{ user: App.Models.User; errors: Record<string, string> }>();

Links: <Link href="/dashboard"> (not <a>)

Forms:

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>

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>