Rails + Vue

A starter for working with Rails 7 + Vue 3.

Features

• ✅ Lazy loading of Vue components on pages where you want to use it
• ✅ TypeScript (optional) support
• ✅ TailwindCSS
• ✅ Vite for frontend assets via Vite Ruby
• ✅ Navigation handled with TurboDrive
• ✅ System tests driven by RSpec + Capybara + Playwright
  • spec/system/pandas/index_spec.rb can be a helpful example
  • Ruby Playwright - Page API
• ✅ Custom generator for creating a view that loads a Vue component: rails g view_with_vue index|show|edit|create ROUTE_PATH. See more details below
• ✅ GitHub actions workflow for running Vitest and Rspec tests

Dev

Setup

bin/setup

Run app:

bin/dev

Run tests:

Rails tests (including system/e2e tests)

rspec

Frontend (unit and component tests with Vitest)

yarn test

Generate a new scaffold with and have the views styled with TailwindCSS

rails g scaffold
# Ex. rails g scaffold animal name:string species:string age_years:integer

Generate a view that will mount a Vue.js component

rails generate view_with_vue index|show|edit|create ROUTE_PATH
# Ex. rails g view_with_vue edit animals/llamas will create the route /animals/llamas/:id/edit with a Vue component that loads on the view for that route.

Details

Versions of key dependencies:

• Vue@3.3.4
• rails@7.0.6.0
• vite@4.3.3