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
Install
inertia-rails/skills/shadcn-vue-inertia
git clone https://github.com/inertia-rails/skills
cp -r skills/skills/shadcn-vue-inertia ~/.claude/skills/shadcn-vue-inertianpx skillfed install inertia-rails/skills/shadcn-vue-inertiaFrequently 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)
Read as markdown · JSON record · Browse the source repository
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