inertia-patterns

Enforce Inertia.js patterns in Vue 3 components for router-based data handling.

Updated Jan 11, 2026
One-click install
npx skills add https://github.com/richardhowes/self-improvement-code-quality-plugin --skill inertia-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: inertia-patterns
Source: https://github.com/richardhowes/self-improvement-code-quality-plugin/tree/main/code-quality/skills/inertia-patterns
Command: npx skills add https://github.com/richardhowes/self-improvement-code-quality-plugin --skill inertia-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams enforce consistent Inertia.js usage in Vue components, preventing direct HTTP calls and guiding proper navigation and form patterns.

Core Features & Use Cases

  • Enforce no direct HTTP clients: ensure data fetching uses Inertia props and router methods.
  • Promote correct Inertia usage: prefer router.reload, router.visit, and Inertia Link for navigation and form submission.
  • Use Case: In a Vue 3 + Inertia app, ensure all data requests go through Inertia and forms use useForm for state management.

Quick Start

Integrate these guidelines into your code reviews and linting rules to automatically flag deviations when editing Vue components that use Inertia.

Frequently Asked Questions about inertia-patterns

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

FAQPage Schema
How do I enforce Inertia.js patterns in Vue 3 components?

To enforce Inertia.js patterns in Vue 3 components, apply guidelines that validate proper imports, router usage, and useForm integration during development tasks. This prevents direct HTTP calls and promotes router-based data handling.

Why does Inertia.js require useForm for form submissions in Vue?

Inertia.js requires useForm for form submissions in Vue to properly manage form state and handle data submission. This pattern ensures forms integrate natively with Inertia's router instead of using direct HTTP clients.

What is the best way to handle data fetching in Inertia.js without direct HTTP calls?

The best way to handle data fetching in Inertia.js without direct HTTP calls is using Inertia props alongside router methods like router.reload and router.visit. This ensures all data requests route through Inertia properly.

Do I need external dependencies to validate Inertia.js usage in my project?

You do not need external dependencies to validate Inertia.js usage in your project. The validation requires no external tools beyond standard project dependencies to check component usage patterns.

When should I use router.visit versus Inertia Link for page navigation?

Use router.visit for programmatic page navigation and Inertia Link for standard navigation triggers within your Vue components. Both patterns are enforced to prevent direct HTTP calls and promote proper router-based data handling.