A Single-Page App with Vue.js and Rails

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.

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.

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!

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.

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.

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.

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.

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.

With Vue, Vuex, and the Rails API knitted together for making GET requests, we now turn our attention to a POST request. An empty tackle box catches no fish, so we dispatch a Vuex action to add a bait to the tackle box. We explore that feature from the frontend to the backend.

With our lucky lures now in our tackle box, it's time to look at the second “page” of our application: the tackle box page. By way of various components, this page renders the items in the angler's tackle box and, more interestingly, the catches made on those baits.

Next up we log a catch, which leads to a question: How does a child Vue component communicate with its parent component? By tracing the code end-to-end we learn how to use custom Vue events.

Deciding how to handle authentication for Fishub was a major design decision. How would the Vue app track who's signed in and then communicate that to the API when making authenticated requests? And how could we address Cross-Site Scripting (XSS) attacks and Cross-Site Request Forgery (CSRF)? It turns out that relying on tried-and-true Rails session cookies proved to be great approach!

Now that we understand conceptually how Vue, Vuex, and Rails will interact in terms of authentication, it's time to dig deep into the code. Starting with the SignIn component, we breakdown the sign in progression piece by piece. We also look at using JavaScript Promises to handle varying concerns at different levels within the app.

We're in the thick of it now! The Vue app knows who's signed in and is ready to make authenticated requests. And that's where two cookies come into play. We also want to enable Cross-Original Resource Sharing (CORS) so our frontend can access resources on our backend.