Rails Turbo Vue
A Rails 7 app that can use Vue to render parts of views on the client side
Rails + Turbo + Vue
Render your views with Rails and then sprinkle in client-side rendered Vue components where you want them. When Vue components are used, they are dynamically imported and mounted, keeping your app's load times fast for users by keeping js bundle sizes small.
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.rbcan 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:
