---
name: inertia-svelte-development
description: "Develops Inertia.js v3 Svelte 5 client-side applications. Activates when creating Svelte pages, forms, or navigation; using Link, Form, useForm, useHttp, setLayoutProps, or router; working with deferred props, prefetching, optimistic updates, instant visits, or polling; or when user mentions Svelte with Inertia, Svelte pages, Svelte forms, or Svelte navigation."
license: MIT
metadata:
  author: laravel
---
# Inertia Svelte Development

## When to Apply

Activate this skill when:

- Creating or modifying Svelte page components for Inertia
- Working with forms in Svelte (using ___SINGLE_BACKTICK___<Form>___SINGLE_BACKTICK___, ___SINGLE_BACKTICK___useForm___SINGLE_BACKTICK___, or ___SINGLE_BACKTICK___useHttp___SINGLE_BACKTICK___)
- Implementing client-side navigation with ___SINGLE_BACKTICK___<Link>___SINGLE_BACKTICK___ or ___SINGLE_BACKTICK___router___SINGLE_BACKTICK___
- Using v3 features: deferred props, prefetching, optimistic updates, instant visits, layout props, HTTP requests, WhenVisible, InfiniteScroll, once props, flash data, or polling
- Building Svelte-specific features with the Inertia protocol

## Important: Svelte 5 Required

Inertia v3 requires Svelte 5. All code must use Svelte 5 runes syntax:

- Use ___SINGLE_BACKTICK___let { prop } = $props()___SINGLE_BACKTICK___ (not ___SINGLE_BACKTICK___export let prop___SINGLE_BACKTICK___)
- Use ___SINGLE_BACKTICK___onclick___SINGLE_BACKTICK___ (not ___SINGLE_BACKTICK___on:click___SINGLE_BACKTICK___)
- Use ___SINGLE_BACKTICK___$derived()___SINGLE_BACKTICK___ for reactive values (not ___SINGLE_BACKTICK___$:___SINGLE_BACKTICK___)
- Use ___SINGLE_BACKTICK___{#snippet}___SINGLE_BACKTICK___ for named slots (not ___SINGLE_BACKTICK___slot="name"___SINGLE_BACKTICK___)
- Use ___SINGLE_BACKTICK___{@render children()}___SINGLE_BACKTICK___ for default slot content

## Documentation

Use ___SINGLE_BACKTICK___search-docs___SINGLE_BACKTICK___ for detailed Inertia v3 Svelte patterns and documentation.

## Basic Usage

### Page Components Location

Svelte page components should be placed in the ___SINGLE_BACKTICK___