ask-vue-architect

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

<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>

<detection> Check project for: - `inertiajs/inertia-laravel` or `resources/js/Pages` → Inertia (priority) - `nuxt.config.ts` → Nuxt (auto-imports) - `vite.config.ts` only → Vite SPA (manual imports, vue-router) </detection>

<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>

<critical_constraints> ❌ 禁止使用

<a href="">

→ 会导致全页面重载，请使用

<Link>

❌ 表单禁止使用 axios.post → 请使用 Inertia 提供的

useForm

❌ 禁止硬编码URL → 请使用（Ziggy的）

route()

辅助函数 ✅ 必须使用

<script setup lang="ts">

✅ 必须在搭建脚手架前检测技术栈类型 </critical_constraints>

<detection> 检测项目中是否存在以下内容： - `inertiajs/inertia-laravel` 或 `resources/js/Pages` → 判定为Inertia（优先级最高） - `nuxt.config.ts` → 判定为Nuxt（自动导入） - 仅存在 `vite.config.ts` → 判定为Vite单页应用（手动导入，需使用vue-router） </detection>

<inertia_rules> Props：来自Laravel控制器，不要在onMounted中获取

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

链接：使用

<Link href="/dashboard">

（不要用

<a>

）

表单：

const form = useForm({ email: '', password: '' });
form.post(route('login'), { onFinish: () => form.reset('password') });

错误提示：

:error="form.errors.email"

全局状态：

usePage().props.auth.user

</inertia_rules>

<persistent_layouts>

import AppLayout from '@/Layouts/AppLayout.vue';
defineOptions({ layout: AppLayout });

</persistent_layouts>

<state_management>

本地状态：使用
```
ref()
```
管理UI状态
全局状态（Inertia）：使用
```
usePage()
```
管理认证、闪存消息
复杂客户端状态：使用Pinia（Setup Store语法） </state_management>