Skip to content
A Vue.js front-end paired with a Ruby on Rails API-based backend
JavaScript Ruby Vue CSS HTML
Branch: master
Clone or download
Latest commit c7f6e77 Jan 26, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
app init Jan 21, 2019
bin init Jan 21, 2019
config init Jan 21, 2019
db init Jan 21, 2019
lib/tasks init Jan 21, 2019
log init Jan 21, 2019
public init Jan 21, 2019
recordstore-front init Jan 21, 2019
test init Jan 21, 2019
tmp init Jan 21, 2019
vendor init Jan 21, 2019
.gitignore init Jan 21, 2019
.ruby-version init Jan 21, 2019
Gemfile init Jan 21, 2019
Gemfile.lock init Jan 21, 2019 Fix markdown Jan 25, 2019

Ruby on Rails API with Vue.js

An 8-part tutorial on how to build a Ruby on Rails API based app using Vue.js as the frontend

Did you know Ruby on Rails can be used as a strict API based backend application? What's the benefit to this? Think of it as a single source of truth for multiple future applications to absorb and use this data directly. Anything from a native mobile application, to a front-end framework, can talk with this data. Many apps can essentially communicate with a "source of truth" in return which means more consistent applications for all.

In this build, I'll be crafting a simple but thorough application where Ruby on Rails is our backend and Vue.js + Axios is our front-end. I'll create two apps that communicate in order to achieve the same result of a normal Rails-based app but with all the perks of an API.

Used in this build

What are we building exactly?

This app at its core is simple. It will be an archive of vinyl records for sale and categorized by artist. We won't be implementing a ton of foreign logic but rather just getting the foundations of an API-based application in order. We'll touch on authentication (not using Devise 😉) and basic CRUD.

There will be two apps.

  • A Ruby on Rails backend - This will handle our data, sessions, and authentication.
  • A Vue.js frontend - This will be the view layer but also the one responsible for sending and receiving data to our rails-based backend. The front-end will run on a different instance using the Vue-CLI to help us set up an app.

Read and watch the whole tutorial series

You can’t perform that action at this time.