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

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

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.

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.

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 2.7
  • PostgreSQL

References

Download Details:

Author: ledermann

Live Demo: https://workcation.ledermann.dev/

GitHub: https://github.com/ledermann/workcation

vuejs vue-js javascript ruby on rails ruby

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

A demo application built with Ruby on Rails and Vue.js

PingCRM on Rails - A Ruby on Rails demo application to illustrate how Inertia.js works .PingCRM on Rails A demo application built with Ruby on Rails and Vue.js to illustrate how Inertia.js works.

Hire Ruby on Rails Developer | Hire RoR Developer

#1 Ruby on Rails development company. Hire Ruby on rails developer or a team to build secure, scalable and complex web solutions with a quick turnaround time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.