Laravel Inertia React

Laravel + Inertia.js + React

Comprehensive patterns for building modern monolithic applications with Laravel, Inertia.js, and React. Contains 30+ rules for seamless full-stack development.

When to Apply

Reference these guidelines when:

• Creating Inertia page components
• Handling forms with useForm hook
• Managing shared data and authentication
• Implementing persistent layouts
• Navigating between pages

Rule Categories by Priority

| Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Page Components | CRITICAL | page- | | 2 | Forms & Validation | CRITICAL | form- | | 3 | Navigation & Links | HIGH | nav- | | 4 | Shared Data | HIGH | shared- | | 5 | Layouts | MEDIUM | layout- | | 6 | File Uploads | MEDIUM | upload- | | 7 | Advanced Patterns | LOW | advanced- |

Quick Reference

1. Page Components (CRITICAL)

• page-props-typing - Type page props from Laravel
• page-component-structure - Standard page component pattern
• page-head-management - Title and meta tags with Head
• page-default-layout - Assign layouts to pages

2. Forms & Validation (CRITICAL)

• form-useform-basic - Basic useForm usage
• form-validation-errors - Display Laravel validation errors
• form-processing-state - Handle form submission state
• form-reset-preserve - Reset vs preserve form data
• form-nested-data - Handle nested form data
• form-transform - Transform data before submit

3. Navigation & Links (HIGH)

• nav-link-component - Use Link for navigation
• nav-preserve-state - Preserve scroll and state
• nav-partial-reloads - Reload only what changed
• nav-replace-history - Replace vs push history

4. Shared Data (HIGH)

• shared-auth-user - Access authenticated user
• shared-flash-messages - Handle flash messages
• shared-global-props - Access global props
• shared-typescript - Type shared data

5. Layouts (MEDIUM)

• layout-persistent - Persistent layouts pattern
• layout-nested - Nested layouts
• layout-default - Default layout assignment
• layout-conditional - Conditional layouts

6. File Uploads (MEDIUM)

• upload-basic - Basic file upload
• upload-progress - Upload progress tracking
• upload-multiple - Multiple file uploads

7. Advanced Patterns (LOW)

• advanced-polling - Real-time polling
• advanced-prefetch - Prefetch pages
• advanced-modal-pages - Modal as pages
• advanced-infinite-scroll - Infinite scrolling

Essential Patterns

Page Component with TypeScript

// resources/js/Pages/Posts/Index.tsx
import { Head, Link } from '@inertiajs/react'

interface Post {
  id: number
  title: string
  excerpt: string
  created_at: string
  author: {
    id: number
    name: string
  }
}

interface Props {
  posts: {
    data: Post[]
    links: { url: string | null; label: string; active: boolean }[]
  }
  filters: {
    search?: string
  }
}

export default function Index({ posts, filters }: Props) {
  return (
    <>
      

      
        Posts

        
          {posts.data.map((post) => (
            
              
                
                  {post.title}
                
              
              {post.excerpt}
              
                By {post.author.name}
              
            
          ))}
        
      
    
  )
}

Form with useForm

// resources/js/Pages/Posts/Create.tsx
import { Head, useForm, Link } from '@inertiajs/react'
import { FormEvent } from 'react'

interface Category {
  id: number
  name: string
}

interface Props {
  categories: Category[]
}

export default function Create({ categories }: Props) {
  const { data, setData, post, processing, errors, reset } = useForm({
    title: '',
    body: '',
    category_id: '',
  })

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    post(route('posts.store'), {
      onSuccess: () => reset(),
    })
  }

  return (
    <>
      

      
        
          
            Title
          
           setData('title', e.target.value)}
            className="w-full border rounded px-3 py-2"
          />
          {errors.title && (
            {errors.title}
          )}
        

        
          
            Category
          
           setData('category_id', e.target.value)}
            className="w-full border rounded px-3 py-2"
          >
            Select a category
            {categories.map((category) => (
              
                {category.name}
              
            ))}
          
          {errors.category_id && (
            {errors.category_id}
          )}
        

        
          
            Content
          
           setData('body', e.target.value)}
            rows={10}
            className="w-full border rounded px-3 py-2"
          />
          {errors.body && (
            {errors.body}
          )}
        

        
          
            {processing ? 'Creating...' : 'Create Post'}
          

          
            Cancel
          
        
      
    
  )
}

Persistent Layout

// resources/js/Layouts/AppLayout.tsx
import { Link, usePage } from '@inertiajs/react'
import { ReactNode } from 'react'

interface Props {
  children: ReactNode
}

export default function AppLayout({ children }: Props) {
  const { auth } = usePage().props as { auth: { user: { name: string } } }

  return (
    
      
        
          
            My App
          
          Welcome, {auth.user.name}
        
      

      
        {children}
      
    
  )
}

// resources/js/Pages/Dashboard.tsx
import AppLayout from '@/Layouts/AppLayout'

export default function Dashboard() {
  return Dashboard
}

// Assign persistent layout
Dashboard.layout = (page: ReactNode) => {page}

Laravel Controller

 Post::with('author:id,name')
                ->latest()
                ->paginate(10),
            'filters' => request()->only('search'),
        ]);
    }

    public function create(): Response
    {
        return Inertia::render('Posts/Create', [
            'categories' => Category::all(['id', 'name']),
        ]);
    }

    public function store(StorePostRequest $request): RedirectResponse
    {
        $post = Post::create([
            ...$request->validated(),
            'user_id' => auth()->id(),
        ]);

        return redirect()
            ->route('posts.show', $post)
            ->with('success', 'Post created successfully.');
    }

    public function show(Post $post): Response
    {
        return Inertia::render('Posts/Show', [
            'post' => $post->load('author', 'category'),
        ]);
    }
}

Shared Data (HandleInertiaRequests)

 [
                'user' => $request->user() ? [
                    'id' => $request->user()->id,
                    'name' => $request->user()->name,
                    'email' => $request->user()->email,
                ] : null,
            ],
            'flash' => [
                'success' => $request->session()->get('success'),
                'error' => $request->session()->get('error'),
            ],
        ]);
    }
}

Flash Messages Component

// resources/js/Components/FlashMessages.tsx
import { usePage } from '@inertiajs/react'
import { useEffect, useState } from 'react'

export default function FlashMessages() {
  const { flash } = usePage().props as {
    flash: { success?: string; error?: string }
  }
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    if (flash.success || flash.error) {
      setVisible(true)
      const timer = setTimeout(() => setVisible(false), 3000)
      return () => clearTimeout(timer)
    }
  }, [flash])

  if (!visible) return null

  return (
    
      {flash.success && (
        
          {flash.success}
        
      )}
      {flash.error && (
        
          {flash.error}
        
      )}
    
  )
}

How to Use

Read individual rule files for detailed explanations and code examples:

rules/form-useform-basic.md
rules/page-props-typing.md
rules/layout-persistent.md

Project Structure

laravel-inertia-react/
├── SKILL.md                 # This file - overview and examples
├── README.md                # Quick reference guide
├── AGENTS.md                # Integration guide for AI agents
├── metadata.json            # Skill metadata and references
└── rules/
    ├── _sections.md         # Rule categories and priorities
    ├── _template.md         # Template for new rules
    ├── page-*.md            # Page component patterns (6 rules)
    ├── form-*.md            # Form handling patterns (8 rules)
    ├── nav-*.md             # Navigation patterns (5 rules)
    ├── shared-*.md          # Shared data patterns (4 rules)
    └── layout-*.md          # Layout patterns (1 rule)

References

• Inertia.js Documentation - Official Inertia.js docs
• Laravel Documentation - Laravel framework docs
• React Documentation - Official React docs
• Ziggy - Laravel route helper for JavaScript

License

MIT License. This skill is provided as-is for educational and development purposes.

Metadata

• Version: 1.0.1
• Last Updated: 2026-01-17
• Maintainer: Asyraf Hussin
• Rule Count: 24 rules across 6 categories
• Tech Stack: Laravel 10+, Inertia.js 1.0+, React 18+, TypeScript 5+

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: AsyrafHussin
• Source: AsyrafHussin/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.