Intro to Vuex and the Server
4:01
Connecting to a REST Server
8:20
Loading Server data into Vuex
10:18
Switching to JSON API
5:09
Data Relationships with JSON API and Vuex
19:11
Tags Page
7:15
Our First Reusable Component
6:19
0% done with Vuex: Loading data using axios and deserializing JSON API relationships

Chapter 2 of 27 in Building VueScreencasts.com
Data Relationships with JSON API and Vuex

Getting data relationships from an API can seem difficult at first... but thanks to JSON API's consistent format, we're able to load our videos and tags, and their relationships, with ease.

In this lesson, we learn how to do some basic munging on incoming data, so it's easier to use within our app, and then attach the tags to the videos and display them as nice green buttons.

Ruby on Rails code

Github: loading JSONAPI relationship (note: this one has some MirageJS mixed in, ignore that if you're not going that path.

Github: showing tags on videos

MirageJS Video

What do others think of VueScreencasts?
"This is an amazing tutorial, especially for beginners. I love how you even go through the package.json. Nice work!"
—Jin Tak
"Thank you, this video helped me a LOT"
—exception360
"Great video."
—Sanjay Gyawali
"Thank you!"
—Артем Єрко
Take your career to the next level