Agent Skills
› NeverSight/learn-skills.dev
› inertia
inertia
GitHub用于构建基于 Inertia.js 的现代单体应用，结合服务端框架与前端组件。涵盖页面布局、导航、表单处理、验证、数据管理及认证等场景，支持 Vue/React/Svelte。
Trigger Scenarios
创建 Inertia 页面或布局
使用 Link 组件进行 SPA 导航
通过 Form 组件或 useForm hook 提交表单
处理服务端验证错误
管理共享数据和 Props
配置客户端或服务端环境
Install
npx skills add NeverSight/learn-skills.dev --skill inertia -g -y
SKILL.md
Frontmatter
{
"name": "inertia",
"description": "Build modern monolith applications with Inertia.js - combining server-side frameworks (Laravel, Rails, etc.) with React\/Vue\/Svelte frontends without building APIs. Use when creating Inertia pages and layouts, working with Link component for navigation, building forms with Form component or useForm hook, handling validation and errors, managing shared data and props, implementing authentication and authorization, using manual visits with router, working with partial reloads, setting up persistent layouts, or configuring client-side setup."
}
Inertia.js
Modern monolith framework for building SPAs without APIs. Combine server-side framework power with React/Vue/Svelte frontends.
Core Concept
Inertia replaces your view layer - controllers return JavaScript page components instead of server-side templates. The <Link> component intercepts clicks for XHR visits, providing SPA experience without full page reloads.
Quick Reference
Basic Page Structure
<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'
defineProps({ user: Object })
</script>
<template>
<Layout>
<Head title="Welcome" />
<h1>Welcome {{ user.name }}</h1>
</Layout>
</template>
Navigation
<Link href="/users">Users</Link>
<Link href="/logout" method="post" as="button">Logout</Link>
<Link href="/search" :data="{ query }" preserve-state>Search</Link>
Form Submission
<!-- Simple Form Component -->
<Form action="/users" method="post">
<input type="text" name="name" />
<button type="submit">Create</button>
</Form>
<!-- useForm Hook -->
<script setup>
import { useForm } from '@inertiajs/vue3'
const form = useForm({ name: '', email: '' })
function submit() { form.post('/users') }
</script>
Documentation by Topic
| Topic | Reference File | Description |
|---|---|---|
| Forms | forms.md | Form component, useForm helper, validation, error handling |
| Links & Navigation | links.md | Link component, manual visits, active states |
| Validation | validation.md | Server-side validation, error bags, error display |
| Pages & Layouts | pages-layouts.md | Page components, persistent layouts, default layouts |
| Data & Props | data-props.md | Shared data, partial reloads, deferred props |
| Authentication | authentication.md | Auth patterns, CSRF protection, authorization |
| Setup | setup.md | Client-side initialization, server-side setup |
| Advanced | advanced.md | Events, error handling, scroll management, SSR |
Common Patterns
Displaying Validation Errors
<div v-if="errors.email">{{ errors.email }}</div>
Accessing Shared Data
<script setup>
import { usePage } from '@inertiajs/vue3'
const page = usePage()
const user = computed(() => page.props.auth?.user)
</script>
Preserving State/Scroll
<Link href="/form" preserve-state preserve-scroll>Edit</Link>
Partial Reloads
<Link :only="['users']">Refresh Users</Link>
router.visit('/users', { only: ['users'] })
Framework Support
- Client: Vue 3 (
@inertiajs/vue3), React (@inertiajs/react), Svelte (@inertiajs/svelte) - Server: Laravel (official), Rails, Phoenix, Symfony (community adapters)
Version History
- e0220ca Current 2026-07-05 20:46
