https://github.com/ledermann/workcation

How to use Inertia.js to build a Vue.js frontend within a Ruby on Rails application (ARCHIVED)
https://github.com/ledermann/workcation

example inertiajs ruby-on-rails vuejs

Last synced: about 1 month ago
JSON representation

How to use Inertia.js to build a Vue.js frontend within a Ruby on Rails application (ARCHIVED)

• Host: GitHub
• URL: https://github.com/ledermann/workcation
• Owner: ledermann
• Archived: true
• Created: 2019-06-19T04:25:32.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-06-02T07:37:49.000Z (over 2 years ago)
• Last Synced: 2024-08-05T08:08:29.267Z (5 months ago)
• Topics: example, inertiajs, ruby-on-rails, vuejs
• Language: Ruby
• Homepage:
• Size: 5.85 MB
• Stars: 45
• Watchers: 4
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• Open-Source-Ruby-and-Rails-Apps - workcation - 🔥 ✅ 🚀 (Happy Exploring 🤘)

README

        
# ARCHIVED

This repository will not be updated anymore. For an example of using Inertia.js with Rails, see my other repo [ledermann/pingcrm](https://github.com/ledermann/pingcrm).

# Inertia.js example app

This is an example on how to use [Inertia.js](https://inertiajs.com/) to build the frontend with [Vue.js](https://vuejs.org/) within a [Ruby on Rails](https://rubyonrails.org/) application

Styles made with [Tailwind CSS](https://tailwindcss.com/).

There is already a demo application to show how Inertia.js works (see [Ping CRM](https://github.com/inertiajs/pingcrm)) - 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](https://github.com/adamwathan/workcation). 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 |

| ------------- | ------------- |

| ![](screenshot-start.png)|![](screenshot-list.png)|

~~There is a live demo available at [workcation.ledermann.dev](https://workcation.ledermann.dev).~~

## Try it out

```bash

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](https://reinink.ca/articles/introducing-inertia-js)

- [FullStackRadio episode 127](http://www.fullstackradio.com/127): Jonathan Reinink - Building Modern Monoliths with Inertia.js

- [Designing with Tailwind CSS](https://tailwindcss.com/screencasts/): Free video series on how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS