shadcn-vue-inertia
This skill shows how to wire shadcn-vue UI components into Inertia Rails Vue 3 applications, replacing Nuxt-specific patterns with Inertia equivalents. Learn to bind form inputs via name attributes, manage dialogs with router state, render server-sorted tables, and display flash toasts—plus avoid common pitfalls like v-model conflicts and frozen computed values.
shadcn-vue-inertia adapts shadcn-vue components for Inertia Rails Vue 3 forms and UI.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-02-13
shadcn-vue-inertia adapts shadcn-vue components for Inertia Rails Vue 3 forms and UI. This skill shows how to wire shadcn-vue UI components into Inertia Rails Vue 3 applications, replacing Nuxt-specific patterns with Inertia equivalents. Learn to bind form inputs via name attributes, manage dialogs with router state, render server-sorted tables, and display flash toasts—plus avoid common pitfalls like v-model conflicts and frozen computed values.
Use it when
- shadcn-vue-inertia shows how to translate Nuxt examples by swapping composables and routing.
- Yes—shadcn-vue-inertia covers building complete forms with shadcn-vue inputs bound to Inertia Form.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
inertia-rails/skills/shadcn-vue-inertia
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you integrate shadcn-vue components into Inertia Rails Vue 3 forms?
shadcn-vue-inertia teaches you to wire shadcn-vue UI components directly into Inertia Rails Vue 3 applications. Bind form inputs using the `name` attribute instead of v-model to work with Inertia's form helper, which automatically tracks field state and submission. Use `useForm()` to create reactive form objects, then pass those to shadcn-vue inputs like Select, Input, and Checkbox. This replaces Nuxt-specific patterns and vee-validate dependencies with Inertia's native validation and error handling.
What's the best way to adapt shadcn-vue examples from Nuxt to Inertia Rails?
shadcn-vue-inertia shows how to translate Nuxt examples by swapping composables and routing. Replace `useRouter()` navigation with Inertia's `router.visit()` or `router.post()`. Use Inertia's `useForm()` instead of Nuxt form patterns, and bind inputs via `name` attributes rather than v-model. For dialogs, manage open/close state through router query parameters or component data instead of Nuxt layouts. This approach keeps your component tree simpler and leverages Rails backend validation directly.
Can you build forms with shadcn-vue inputs using Inertia Form?
Yes—shadcn-vue-inertia covers building complete forms with shadcn-vue inputs bound to Inertia Form. Create a form object with `useForm()`, then bind shadcn-vue Select, Input, Textarea, and Checkbox components via their `name` prop. Inertia automatically collects field values and sends them on form submission. Display validation errors from the server using `form.errors[fieldName]`. This pattern works for all shadcn-vue input types and integrates seamlessly with Rails form processing.
How do you implement dialogs, tables, and dark mode in Inertia Vue apps?
shadcn-vue-inertia demonstrates managing dialogs by storing open/close state in router query parameters or local component state, then rendering shadcn-vue Dialog conditionally. For tables, use shadcn-vue's Table component with server-side sorting—pass sort parameters via `router.visit()` and re-render with new data. Dark mode works via Tailwind's `dark:` classes; toggle the `dark` class on the root element and persist preference to localStorage or a Rails user setting. All three patterns integrate cleanly with Inertia's reactive data flow.
How should you handle form validation errors and flash messages in shadcn-vue Inertia?
shadcn-vue-inertia shows using Inertia's `form.errors` object to display field-level validation errors below shadcn-vue inputs. For flash messages (like success toasts), access `page.props.flash` in your component and render shadcn-vue Toast or Alert components conditionally. Bind error text to the `description` prop of shadcn-vue form field components. Rails validation errors flow automatically through Inertia responses, so no extra setup is needed—just read from `form.errors` and `page.props` in your template.
What common pitfalls should you avoid when using shadcn-vue with Inertia?
shadcn-vue-inertia warns against v-model conflicts—use `name` attributes instead to let Inertia manage state. Avoid frozen computed values that block reactivity; keep form data mutable. Don't mix vee-validate with Inertia's validation; rely on server-side Rails validation and `form.errors`. Be careful with dialog state management—use router parameters or local refs, not global stores that can desync. Finally, ensure shadcn-vue's Tailwind config merges with your Rails app's config so styles apply correctly.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
shadcn-vue for Inertia Rails
shadcn-vue patterns adapted for Inertia.js + Rails + Vue 3. NOT Nuxt.
Before using a shadcn-vue example, ask:
- Does it use Nuxt-specific APIs? (useRouter, useFetch, <NuxtLink>) → Replace with Inertia router, server props, <Link>
- Does it use vee-validate + zod? → Replace with Inertia <Form> + name attributes. Inertia handles CSRF, errors, redirects, processing state.
Key Differences from Nuxt Defaults
| shadcn-vue default (Nuxt) | Inertia equivalent |
|---|---|
useFetch / useAsyncData |
Server-rendered props via controller |
useRouter() (Nuxt) |
router from @inertiajs/vue3 |
<NuxtLink> |
<Link> from @inertiajs/vue3 |
vee-validate + zod |
Inertia <Form> |
(truncated - see the full file via the links below)
File tree — 3 files
skills/shadcn-vue-inertia/SKILL.md
skills/shadcn-vue-inertia/references/components.md
skills/shadcn-vue-inertia/references/flash-toast.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Integrate shadcn-vue components into Inertia Rails Vue 3 forms”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
shadcn-inertia teaches you how to use shadcn/ui components in Inertia Rails React applications by adapting Next.js examples. It replaces shadcn's form components and react-hook-form with Inertia's Form component, removes Next.js directives and APIs, and covers dialogs, tables, toasts, and dark mode setup.
Adapt shadcn-svelte (bits-ui) components for Inertia.js + Rails + Svelte apps by replacing SvelteKit patterns with Inertia equivalents. Wire inputs to Inertia Form via name attributes, manage dialogs and tables with Inertia router, and configure flash-based toasts with Rails initializers.
Inertia Rails Pages provides patterns for constructing pages that maintain layout state across navigation, derive UI from URL parameters server-side, and use client-side router methods to update props without full reloads. It covers persistent layouts, prefetching, partial data refresh, and deferred component rendering across React, Vue, and Svelte.
Configure type-safe shared props, flash messages, and error handling across Inertia Rails with React, Vue, or Svelte using InertiaConfig module augmentation. Define your shared data types once in globals.d.ts and index.ts, then access them globally via usePage() with full TypeScript support. Avoid common pitfalls like interface vs. type constraints and incorrect destructuring patterns.
This skill provides 30+ patterns for Laravel, Inertia.js, and React integration, covering page components, form handling with useForm, navigation, shared data, layouts, and file uploads. Use it when building Inertia page components, managing forms with validation, or implementing persistent layouts in full-stack applications.
Build forms in Inertia.js + Rails using the `<Form>` component for simple create/edit workflows or `useForm` for multi-step wizards and dynamic fields. Automatic CSRF token handling, error mapping, file upload detection, and progress tracking eliminate the need for external form libraries. React, Vue, and Svelte examples included.
More skills shadcn (MIT) · inertia-rails-setup (MIT) · shadcn-ui (MIT) · Inertia Coder (NOASSERTION) · inertia-rails-architecture (MIT) · shadcn-ui (MIT)