Loading...
Loading...
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.
npx skill4agent add 1naichii/ai-code-tools inertia<Link><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><Link href="/users">Users</Link>
<Link href="/logout" method="post" as="button">Logout</Link>
<Link href="/search" :data="{ query }" preserve-state>Search</Link><!-- 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>| 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 |
<div v-if="errors.email">{{ errors.email }}</div><script setup>
import { usePage } from '@inertiajs/vue3'
const page = usePage()
const user = computed(() => page.props.auth?.user)
</script><Link href="/form" preserve-state preserve-scroll>Edit</Link><Link :only="['users']">Refresh Users</Link>
router.visit('/users', { only: ['users'] })@inertiajs/vue3@inertiajs/react@inertiajs/svelte