vue-with-rails
CommunityBuild Vue + Rails apps with correct conventions, no guesswork.
Authorsandeepmvl
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill eliminates the guesswork and common mistakes AI coding agents make when integrating Vue with Ruby on Rails, ensuring generated code follows senior Rails developer conventions instead of broken or non-standard patterns.
Core Features & Use Cases
- Default Inertia.js Integration: Guides use of Inertia.js with the Vue 3 adapter as the standard pattern for most Rails + Vue apps, avoiding unnecessary SPA overhead.
- Correct Build Tooling Setup: Provides step-by-step instructions for configuring vite_ruby with the official @vitejs/plugin-vue for hot module replacement and asset compilation.
- Client State Guidance: Recommends Pinia only for genuinely client-only state, with most page state managed server-side via Inertia props to reduce complexity.
- Hotwire Compatibility Patterns: Includes instructions for adding isolated Vue "island" components to existing Hotwire apps without replacing your entire frontend stack.
- Use Case: If you ask an AI to add a Vue-powered event calendar to your existing Rails Hotwire app, it will use the correct Stimulus-Vue island pattern instead of rebuilding your entire frontend.
Quick Start
Use the vue-with-rails skill to set up a new Rails 8 app with Vue 3, Inertia.js, and vite_ruby following Rails best practices.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: vue-with-rails Download link: https://github.com/sandeepmvl/rails-skills/archive/main.zip#vue-with-rails Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 537,000+ vetted skills library on demand.