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?
"Thank you. Even after having seen many tutorials, I keep learning a lot from you. You teach well!"
—Lars Sørensen
"Really appreciate it! You're a good tutor."
—Ous
"This was EXACTLY what I needed. Informative and succinct. Thank you for taking the time to do this."
—Zara Kayn
"It's very helpful. Thank you for a great tutorial."
—Abdulaziz Al Ghafli
Take your career to the next level