inertia-vue-development

name inertia-vue-development description Develops Inertia.js v3 Vue client-side applications. Activates when creating Vue 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 Vue with Inertia, Vue pages, Vue forms, or Vue navigation. license MIT metadata {"author":"laravel"} Inertia Vue Development When to Apply Activate this skill when: Creating or modifying Vue page components for Inertia Working with forms in Vue (using <Form> , useForm , or useHttp ) Implementing client-side navigation with <Link> or router Using v3 features: deferred props, prefetching, optimistic updates, instant visits, layout props, HTTP requests, WhenVisible, InfiniteScroll, once props, flash data, or polling Building Vue-specific features with the Inertia protocol Documentation Use search-docs for detailed Inertia v3 Vue patterns and documentation. Basic Usage Page Components Location Vue page components should be placed in the resources/js/Pages directory. Page Component Structure <script setup> defineProps({ users: Array }) </script> <template> <div> <h1>Users</h1> <ul> <li v-for="user in users" :key="user.id"> {{ user.name }} </li> </ul> </div> </template> Client-Side Navigation Basic Link Component Use <Link> for client-side navigation instead of traditional <a> tags: <script setup> import { Link } from '@inertiajs/vue3' </script> <template> <div> <Link href="/">Home</Link> <Link href="/users">Users</Link> <Link :href="`/users/${user.id}`">View User</Link> </div> </template> Link with Method <script setup> import { Link } from '@inertiajs/vue3' </script> <template> <Link href="/logout" method="post" as="button"> Logout </Link> </template> Prefetching Prefetch pages to improve perceived performance: <script setup> import { Link } from '@inertiajs/vue3' </script> <template> <Link href="/users" prefetch> Users </Link> </template> Programmatic Navigation <script setup> import { router } from '@inertiajs/vue3' function handleClick() { router.visit('/users') } // Or with options function createUser() { router.visit('/users', { method: 'post', data: { name: 'John' }, onSuccess: () => console.log('Done'), }) } </script> <template> <Link href="/users">Users</Link> <Link href="/logout" method="post" as="button">Logout</Link> </template> Form Handling Form Component (Recommended) The recommended way to build forms is with the <Form> component: <script setup> import { Form } from '@inertiajs/vue3' </script> <template> <Form action="/users" method="post" #default="{ errors, processing, wasSuccessful }"> <input type="text" name="name" /> <div v-if="errors.name">{{ errors.name }}</div> <input type="email" name="email" /> <div v-if="errors.email">{{ errors.email }}</div> <button type="submit" :disabled="processing"> {{ processing ? 'Creating...' : 'Create User' }} </button> <div v-if="wasSuccessful">User created!</div> </Form> </template> Form Component With All Props <script setup> import { Form } from '@inertiajs/vue3' </script> <template> <Form action="/users" method="post" #default="{ errors, hasErrors, processing, progress, wasSuccessful, recentlySuccessful, setError, clearErrors, resetAndClearErrors, defaults, isDirty, reset, submit }" > <input type="text" name="name" :value="defaults.name" /> <div v-if="errors.name">{{ errors.name }}</div> <button type="submit" :disabled="processing"> {{ processing ? 'Saving...' : 'Save' }} </button> <progress v-if="progress" :value="progress.percentage" max="100"> {{ progress.percentage }}% </progress> <div v-if="wasSuccessful">Saved!</div> </Form> </template> 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. <script setup> import { Form } from '@inertiajs/vue3' </script> <template> <Form action="/users" method="post" reset-on-success set-defaults-on-success #default="{ errors, processing, wasSuccessful }" > <input type="text" name="name" /> <div v-if="errors.name">{{ errors.name }}</div> <button type="submit" :disabled="processing"> Submit </button> </Form> </template> Forms can also be built using the useForm composable for more programmatic control. Use the search-docs tool with a query of useForm helper for guidance. useForm Composable For more programmatic control or to follow existing conventions, use the useForm composable: <script setup> import { useForm } from '@inertiajs/vue3' const form = useForm({ name: '', email: '', password: '', }) function submit() { form.post('/users', { onSuccess: () => form.reset('password'), }) } </script> <template> <form @submit.prevent="submit"> <input type="text" v-model="form.name" /> <div v-if="form.errors.name">{{ form.errors.name }}</div> <input type="email" v-model="form.email" /> <div v-if="form.errors.email">{{ form.errors.email }}</div> <input type="password" v-model="form.password" /> <div v-if="form.errors.password">{{ form.errors.password }}</div> <button type="submit" :disabled="form.processing"> Create User </button> </form> </template> Inertia v3 Features HTTP Requests Use the useHttp hook for standalone HTTP requests that do not trigger Inertia page visits. It provides the same developer experience as useForm , but for plain JSON endpoints. <script setup> import { useHttp } from '@inertiajs/vue3' const http = useHttp({ query: '', }) function search() { http.get('/api/search', { onSuccess: (response) => { console.log(response) }, }) } </script> <template> <input v-model="http.query" @input="search" /> <div v-if="http.processing">Searching...</div> </template> Optimistic Updates Apply data changes instantly before the server responds, with automatic rollback on failure: <script setup> import { router } from '@inertiajs/vue3' function like(post) { router.optimistic((props) => ({ post: { ...props.post, likes: props.post.likes + 1, }, })).post(`/posts/${post.id}/like`) } </script> Optimistic updates also work with useForm and the <Form> component: <template> <Form action="/todos" method="post" :optimistic="(props, data) => ({ todos: [...props.todos, { id: Date.now(), name: data.name, done: false }], })" > <input type="text" name="name" /> <button type="submit">Add Todo</button> </Form> </template> Instant Visits Navigate to a new page immediately without waiting for the server response. The target component renders right away with shared props, while page-specific props load in the background. <script setup> import { Link } from '@inertiajs/vue3' </script> <template> <Link href="/dashboard" component="Dashboard">Dashboard</Link> <Link href="/posts/1" component="Posts/Show" :page-props="{ post: { id: 1, title: 'My Post' } }" > View Post </Link> </template> Layout Props Share dynamic data between pages and persistent layouts: <script setup> withDefaults(defineProps({ title: String, showSidebar: Boolean, }), { title: 'My App', showSidebar: true, }) </script> <template> <header>{{ title }}</header> <aside v-if="showSidebar">Sidebar</aside> <main> <slot /> </main> </template> <script setup> import { setLayoutProps } from '@inertiajs/vue3' setLayoutProps({ title: 'Dashboard', showSidebar: false, }) </script> <template> <h1>Dashboard</h1> </template> Deferred Props Use deferred props to load data after initial page render: <script setup> defineProps({ users: Array }) </script> <template> <div> <h1>Users</h1> <div v-if="!users" class="animate-pulse"> <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div> <div class="h-4 bg-gray-200 rounded w-1/2"></div> </div> <ul v-else> <li v-for="user in users" :key="user.id"> {{ user.name }} </li> </ul> </div> </template> Polling