inertia-svelte-development

name: inertia-svelte-development description: >- Develops Inertia.js v2 Svelte client-side applications. Activates when creating Svelte pages, forms, or navigation; using Link, Form, or router; working with deferred props, prefetching, or polling; or when user mentions Svelte with Inertia, Svelte pages, Svelte forms, or Svelte navigation.

Inertia Svelte Development

When to Apply

Activate this skill when:

Creating or modifying Svelte page components for Inertia
Working with forms in Svelte (using <Form> or useForm)
Implementing client-side navigation with <Link> or router
Using v2 features: deferred props, prefetching, or polling
Building Svelte-specific features with the Inertia protocol

Documentation

Use search-docs for detailed Inertia v2 Svelte patterns and documentation.

Basic Usage

Page Components Location

Svelte page components should be placed in the resources/js/Pages directory.

Page Component Structure

Users

{user.name}

Client-Side Navigation

Basic Link Component

Use <Link> for client-side navigation instead of traditional <a> tags:

Home Users View User

Link With Method

Logout

Prefetching

Prefetch pages to improve perceived performance:

Users

Programmatic Navigation

Form Handling

Form Component (Recommended)

The recommended way to build forms is with the <Form> component:

{#if errors.name}

{errors.name}

{/if}

<input type="email" name="email" />
{#if errors.email}
    <div>{errors.email}</div>
{/if}

<button type="submit" disabled={processing}>
    {processing ? 'Creating...' : 'Create User'}
</button>

{#if wasSuccessful}
    <div>User created!</div>
{/if}

Form Component Reset Props

The <Form> component supports automatic resetting:

resetOnError - Reset form data when the request fails
resetOnSuccess - Reset form data when the request succeeds
setDefaultsOnSuccess - Update default values on success

Use the search-docs tool with a query of form component resetting for detailed guidance.

{#if errors.name}

{errors.name}

{/if}

<button type="submit" disabled={processing}>
    Submit
</button>

Forms can also be built using the useForm hook for more programmatic control. Use the search-docs tool with a query of useForm helper for guidance.

`useForm` Hook

For more programmatic control or to follow existing conventions, use the useForm hook:

{#if $form.errors.name}

{$form.errors.name}

{/if}

<input type="email" bind:value={$form.email} />
{#if $form.errors.email}
    <div>{$form.errors.email}</div>
{/if}

<input type="password" bind:value={$form.password} />
{#if $form.errors.password}
    <div>{$form.errors.password}</div>
{/if}

<button type="submit" disabled={$form.processing}>
    Create User
</button>

Inertia v2 Features

Deferred Props

Use deferred props to load data after initial page render:

Users

{#if !users}

{:else}

{user.name}

{/if}

Polling

Automatically refresh data at intervals:

Dashboard

Active Users: {stats.activeUsers}

Server-Side Patterns

Server-side patterns (Inertia::render, props, middleware) are covered in inertia-laravel guidelines.

Common Pitfalls

Using traditional <a> links instead of Inertia's <Link> component (breaks SPA behavior)
Forgetting to add loading states (skeleton screens) when using deferred props
Not handling the undefined state of deferred props before data loads
Using <form> without preventing default submission (use <Form> component or on:submit|preventDefault)
Forgetting to check if <Form> component is available in your Inertia version