By name: inertia-vue-development description: >- Develops Inertia.js v1 Vue client-side applications. Activates when creating Vue pages, forms, or navigation; using Link or router; or when user mentions Vue with Inertia, Vue pages, Vue forms, or Vue navigation.
Inertia Vue Development
When to Apply
Activate this skill when:
- Creating or modifying Vue page components for Inertia
- Working with forms in Vue (using
router.post) - Implementing client-side navigation with
<Link>orrouter - Building Vue-specific features with the Inertia protocol
Documentation
Use search-docs for detailed Inertia v1 Vue patterns and documentation.
Basic Usage
Page Components Location
Vue page components should be placed in the resources/js/Pages directory.
Page Component Structure
Important: Vue components must have a single root element.
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
Programmatic Navigation
Form Handling
Using router.post
Inertia v1 Limitations
Inertia v1 does not support these v2 features:
<Form>component- Deferred props
- Prefetching
- Polling
- Infinite scrolling with
WhenVisible - Merging props
Do not use these features in v1 projects.
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) - Using multiple root elements in Vue components (while Vue 3 supports this, a single root is recommended for Inertia v1 compatibility)
- Trying to use Inertia v2 features (deferred props,
<Form>component, etc.) in v1 projects - Using
<form>without preventing default submission (use@submit.prevent) - Not handling loading states during form submission