🎉 Get early access to Unpacked: Single-Page App with Vue.js and Rails


A Single-Page App
with Vue.js and Rails

a design and code exploration

Built with Vue 2.5 and Rails 5.2

What does it take to put together a single-page web app using Vue.js on the frontend and Rails as the backend API?

And how would you design it in a pragmatic, straightforward way?

Find out as we unpack an app together layer by layer, in less than 90 minutes!

Start With a Completed App and Break It Down

Become familiar with the modern landscape of single-page web app development.

Rails may not be in the news as much as in years past, but it's everywhere! So even if you're using the hottest JavaScript framework, at some point you'll likely need to talk to a Rails app.

This course unpacks what it takes to combine a Vue.js frontend with a backend Rails API. Along the way we address many common design decisions, including:

  • How is the code of the two applications organized and structured?
  • How do JavaScript frontends asynchronously communicate with backend APIs?
  • What does a JSON API design look like?
  • When and where are single-file Vue components used? And how is data shared between them?
  • What role does a router play in a single-page app?
  • When should Vuex be used to manage client-side state?
  • How does authentication work and remain secure between two applications?

We start with the completed app and unpack it layer by layer, answering these questions and much more. You'll come away understanding how everything works together in harmony.

No need to piece together solutions yourself. Use this full-stack application as a springboard for creating your own apps!

The Application We Unpack

How It's Designed

13 Concise, Tightly-Edited Videos

Just the way you like 'em: easy to digest, straight to the point, paced just right.

Introduction and Setup

Welcome! Before diving into our Vue.js + Rails app let's make sure you have your development environment set up so you can follow along as we explore the code and design.

App Overview

The web application we unpack (Fishub) lets anglers track which fishing baits are in their tackle box along with catches made on those baits. We start with a quick walk-through of the app's various features.

Design Overview

Before cracking open the code, we get a lay of the land. Fishub is designed as two distinct applications: the frontend is a single-page Vue.js app and the backend API is a Rails app. How they work together is what this video series is all about!

Vue App Overview

Now that we have the big picture, we open the lid on the Vue.js app to see how the various components, router, and Vuex store are all knitted together when the application mounts.

Rails App Overview

Looking inside the backend Rails app we see the familiar structure of models, views, and controllers as well as the API endpoints that serve up JSON.

End-to-End Feature: Fetch Baits

By taking an end-to-end walkthrough of how the Baits page gets rendered, we get an introduction to how the Vue app makes a request to the API and then consumes the returned JSON.

Client-Side State Management (Vuex)

Multiple components in our Vue app need to share state, and at times, update that state. To do this efficiently, we call upon Vuex to keep everything in sync. How does the Vuex store do that? And when does it make sense to use Vuex? Find out.

End-to-End Feature: Fetch Tackle Box Items

With a Vuex store, multiple Vue components, and the Rails API firmly in place, how does everything work together? We dive deep into the code with an end-to-end exploration of how tackle box items are requested, received, and rendered.

End-to-End Feature: Add a Tackle Box Item

Estimated Release: Late December

End-to-End Feature: Create a Catch

Estimated Release: Late December


Estimated Release: Early January

End-to-End Feature: Sign In

Estimated Release: Early January

End-to-End Feature: Authenticated Requests

Estimated Release: Early January

High-Quality Videos
Streamable and downloadable, DRM-free videos on any device. English subtitles on each video.
Notes and Resources
Installation instructions, supplemental footnotes, alternate design techniques, and handy tips and tricks.
Source Code
Of course, you also get all the source code for the completed app.
Instant, Never-Expiring Access
No monthly subscription or time limit. Start when you want and repeat as often as you like!

Unpacked: Single-Page App

🎉 Special Early Access Price!

Unpacked: Single-Page App Team License: For up to 10 team members

Up to 10 team members

For Experienced Developers

Because you're beyond a step-by-step intro course.

Step-by-step introductory courses are great for learning syntax, vocabulary, and basic concepts. But once you've got the fundamentals down, your time is better spent diving deep into the interesting parts of a completed application. So in our Unpacked video series, we make efficient use of your time by focusing on design, integration, and advanced features.

This course assumes you're already familiar with the basics of Vue.js and Rails and now you want to apply that knowledge in a broader context. If you're new to Rails, we recommend starting with our popular introductory courses where you'll learn all the fundamentals by building a full-featured application from the ground up.

Created by Mike and Nicole

Hi, we're real people just trying to share our passion for creating stuff!

You may be familiar with our step-by-step courses on Ruby, Rails, Elixir, and Elm. But what happens when you smash (pragmatically, of course) different languages, technologies, and frameworks together? Well, working at the system level gives you the power to create some very cool applications! We're excited to unpack these kinds of applications with you in the Studio. Find out more about us…