inertia-vue-development

Builds Inertia.js v3 Vue pages, forms, and client-side navigation components.

Updated Jun 24, 2026

Search Tags:#frontend #vue #forms #laravel #spa #inertia #client-side navigation

Ready to run

npx skills add https://github.com/stacktracelabs/laravel-vue-starter-kit --skill inertia-vue-development-stacktracelabs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: inertia-vue-development
Source: https://github.com/stacktracelabs/laravel-vue-starter-kit/tree/main/.agents/skills/inertia-vue-development
Command: npx skills add https://github.com/stacktracelabs/laravel-vue-starter-kit --skill inertia-vue-development-stacktracelabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building Vue frontends for Inertia.js applications requires knowing the correct v3 APIs for pages, forms, navigation, and data loading; this Skill provides the exact patterns so you avoid broken SPA behavior and deprecated methods. ## Core Features & Use Cases - Page & Navigation Patterns: Create Vue page components in resources/js/Pages and implement client-side navigation with <Link>, router.visit, prefetching, and instant visits. - Form Handling: Build forms with the <Form> component or useForm composable, including validation errors, progress indicators, and reset behavior. - Inertia v3 Features: Implement deferred props, optimistic updates, useHttp requests, polling, WhenVisible lazy loading, InfiniteScroll, and layout props. - Use Case: When adding a user creation page to a Laravel + Vue app, use this Skill to scaffold the page component, wire up a <Form> with error display, and add prefetching to the navigation links. ## Quick Start Create an Inertia Vue page component with a form that posts to /users and displays validation errors.

Frequently Asked Questions about inertia-vue-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a form in Inertia Vue?▼

Use the <Form> component from @inertiajs/vue3 with action and method attributes, accessing errors and processing state via the default slot. For programmatic control, use the useForm composable with form.post and v-model bindings.

How do I navigate between pages in Inertia Vue?▼

Use the <Link> component instead of <a> tags for client-side navigation, with optional method, prefetch, and component props. For programmatic navigation, call router.visit with the target URL and options like method and data.

What is the difference between useForm and useHttp in Inertia v3?▼

useForm submits data as Inertia visits that trigger page updates, while useHttp makes standalone JSON requests to plain API endpoints without triggering page visits. Both share the same developer experience with processing and error states.

How do deferred props work in Inertia Vue?▼

Deferred props load after the initial page render, so your component must handle the undefined state with skeleton screens or loading indicators. Once the server responds, the prop populates and the component re-renders with the data.

Why is my Inertia Vue navigation doing full page reloads?▼

Full reloads happen when using traditional <a> tags instead of Inertia's <Link> component, which breaks SPA behavior. Replace anchor tags with <Link> from @inertiajs/vue3 to enable client-side navigation.

What breaking changes exist in Inertia v3 for the router?▼

Inertia v3 replaced router.cancel with router.cancelAll, and renamed the invalid and exception events to httpException and networkError. Update event listeners and cancellation calls accordingly when migrating.