---
name: inertia-vue-development
description: "Develops Inertia.js v2 Vue client-side applications. Activates when creating Vue pages, forms, or navigation; using <Link>, <Form>, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions Vue with Inertia, Vue pages, Vue forms, or Vue navigation."
license: MIT
metadata:
  author: laravel
---
@php
/** @var \Laravel\Boost\Install\GuidelineAssist $assist */
@endphp
# Inertia Vue Development

## Documentation

Use ___SINGLE_BACKTICK___search-docs___SINGLE_BACKTICK___ for detailed Inertia v2 Vue patterns and documentation.

## Basic Usage

### Page Components Location

Vue page components should be placed in the ___SINGLE_BACKTICK___{{ $assist->inertia()->pagesDirectory() }}___SINGLE_BACKTICK___ directory.

### Page Component Structure

Important: Vue components must have a single root element.

@verbatim
___BOOST_SNIPPET_0___
@endverbatim

## Client-Side Navigation

### Basic Link Component

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

___BOOST_SNIPPET_1___

### Link with Method

___BOOST_SNIPPET_2___

### Prefetching

Prefetch pages to improve perceived performance:

___BOOST_SNIPPET_3___

### Programmatic Navigation

___BOOST_SNIPPET_4___

## Form Handling

@if($assist->inertia()->hasFormComponent())
### Form Component (Recommended)

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

@verbatim
___BOOST_SNIPPET_5___
@endverbatim

### Form Component With All Props

@verbatim
___BOOST_SNIPPET_6___
@endverbatim

@if($assist->inertia()->hasFormComponentResets())
### Form Component Reset Props

The ___SINGLE_BACKTICK___<Form>___SINGLE_BACKTICK___ component supports automatic resetting:

- ___SINGLE_BACKTICK___resetOnError___SINGLE_BACKTICK___ - Reset form data when the request fails
- ___SINGLE_BACKTICK___resetOnSuccess___SINGLE_BACKTICK___ - Reset form data when the request succeeds
- ___SINGLE_BACKTICK___setDefaultsOnSuccess___SINGLE_BACKTICK___ - Update default values on success

Use the ___SINGLE_BACKTICK___search-docs___SINGLE_BACKTICK___ tool with a query of ___SINGLE_BACKTICK___form component resetting___SINGLE_BACKTICK___ for detailed guidance.

@verbatim
___BOOST_SNIPPET_7___
@endverbatim
@else
Note: This version of Inertia does not support ___SINGLE_BACKTICK___resetOnError___SINGLE_BACKTICK___, ___SINGLE_BACKTICK___resetOnSuccess___SINGLE_BACKTICK___, or ___SINGLE_BACKTICK___setDefaultsOnSuccess___SINGLE_BACKTICK___ on the ___SINGLE_BACKTICK___<Form>___SINGLE_BACKTICK___ component. Using these props will cause errors. Upgrade to Inertia v2.2.0+ to use these features.
@endif

Forms can also be built using the ___SINGLE_BACKTICK___useForm___SINGLE_BACKTICK___ composable for more programmatic control. Use the ___SINGLE_BACKTICK___search-docs___SINGLE_BACKTICK___ tool with a query of ___SINGLE_BACKTICK___useForm helper___SINGLE_BACKTICK___ for guidance.

@endif

### ___SINGLE_BACKTICK___useForm___SINGLE_BACKTICK___ Composable

@if($assist->inertia()->hasFormComponent() === false)
For Inertia v2.0.x: Build forms using the ___SINGLE_BACKTICK___useForm___SINGLE_BACKTICK___ composable as the ___SINGLE_BACKTICK___<Form>___SINGLE_BACKTICK___ component is not available until v2.1.0+.
@else
For more programmatic control or to follow existing conventions, use the ___SINGLE_BACKTICK___useForm___SINGLE_BACKTICK___ composable:
@endif

@verbatim
___BOOST_SNIPPET_8___
@endverbatim

## Inertia v2 Features

### Deferred Props

Use deferred props to load data after initial page render:

@verbatim
___BOOST_SNIPPET_9___
@endverbatim

### Polling

Use the ___SINGLE_BACKTICK___usePoll___SINGLE_BACKTICK___ composable to automatically refresh data at intervals. It handles cleanup on unmount and throttles polling when the tab is inactive.

___BOOST_SNIPPET_10___

___BOOST_SNIPPET_11___

- ___SINGLE_BACKTICK___autoStart___SINGLE_BACKTICK___ (default ___SINGLE_BACKTICK___true___SINGLE_BACKTICK___) — set to ___SINGLE_BACKTICK___false___SINGLE_BACKTICK___ to start polling manually via the returned ___SINGLE_BACKTICK___start()___SINGLE_BACKTICK___ function
- ___SINGLE_BACKTICK___keepAlive___SINGLE_BACKTICK___ (default ___SINGLE_BACKTICK___false___SINGLE_BACKTICK___) — set to ___SINGLE_BACKTICK___true___SINGLE_BACKTICK___ to prevent throttling when the browser tab is inactive

### WhenVisible (Infinite Scroll)

Load more data when user scrolls to a specific element:

@verbatim
___BOOST_SNIPPET_12___
@endverbatim

## Server-Side Patterns

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

## Common Pitfalls

- Using traditional ___SINGLE_BACKTICK___<a>___SINGLE_BACKTICK___ links instead of Inertia's ___SINGLE_BACKTICK___<Link>___SINGLE_BACKTICK___ component (breaks SPA behavior)
- Forgetting that Vue components must have a single root element
- Forgetting to add loading states (skeleton screens) when using deferred props
- Not handling the ___SINGLE_BACKTICK___undefined___SINGLE_BACKTICK___ state of deferred props before data loads
- Using ___SINGLE_BACKTICK___<form>___SINGLE_BACKTICK___ without preventing default submission (use ___SINGLE_BACKTICK___<Form>___SINGLE_BACKTICK___ component or ___SINGLE_BACKTICK___@submit.prevent___SINGLE_BACKTICK___)
- Forgetting to check if ___SINGLE_BACKTICK___<Form>___SINGLE_BACKTICK___ component is available in your Inertia version