workcation
workcation copied to clipboard
ledermann
How to use Inertia.js to build a Vue.js frontend within a Ruby on Rails application (ARCHIVED)
ARCHIVED
This repository will not be updated anymore. For an example of using Inertia.js with Rails, see my other repo ledermann/pingcrm.
Inertia.js example app
This is an example on how to use Inertia.js to build the frontend with Vue.js within a Ruby on Rails application Styles made with Tailwind CSS.
There is already a demo application to show how Inertia.js works (see Ping CRM) - but for PHP/Laravel only. I've build this thing to try Inertia.js with Rails.
This app has two pages - a start screen and a list screen with a filtering UI. The layout and styling is taken from the Tailwind CSS demo project. Click around and inspect the data transmitted via your DevTools network tab. You see HTML responses at the first request and JSON response in all subsequent requests.
| Start screen | List screen |
|---|---|
 |
 |
~~There is a live demo available at workcation.ledermann.dev.~~
Try it out
git clone [email protected]:ledermann/workcation.git
cd workcation
bin/setup
foreman start
Then, open http://localhost:3000 in your browser.
Requirements
- Ruby 3.0
- PostgreSQL
References
- Introducing Inertia.js
- FullStackRadio episode 127: Jonathan Reinink - Building Modern Monoliths with Inertia.js
- Designing with Tailwind CSS: Free video series on how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS
ledermann