Vue 3 And Vuex Frontend With Ruby On Rails 6 REST API Backend Using Axios Calls | 20in20 – Week 15
Today we'll create your own Vue 3 SPA with Vuex and a Quick and easy Rails API backend.
This was a question first posited following a video I made covering how to add Vue to Rails. There were also questions regarding what the differences would be between Vue 2 and Vue 3. Well, after having created this project for the 20in20 challenge, it seems like not much. There are some additional features in Vue 3 that can be leveraged, but the setup remains largely the same.
Adding Vuex is generally also reasonably straightforward. In this tutorial, we'll add it with the Vue CLI because we're creating an entirely separate application. This is the way that I prefer to create my applications, due to it separating the responsibilities more thoroughly. For this reason, we'll use Axios calls to CRUD data from the Rails 6 Rest API.
This tutorial wouldn't have been possible without the things I learned watching Traversy Media's video on the topic: • Vue JS Crash Course (2019)
Timestamps
0:00 Intro and Video Summary
3:30 Creating the Ruby on Rails Backend Rest API
13:55 Creating a Vue 3 with Vuex 4 and Axios Frontend with Jest Testing
24:13 Creating the Todo Items Component
51:30 Todo Items to a Vue 3 Todo List with Vuex and Axios
1:02:00 Filtering Todo Items
1:07:40 Deleting Todo Items
1:11:36 Outro and Video Summary
Photo by Pankaj Patel on Unsplash
Follow me on social media:
https://linktr.ee/deanin
Join this channel to get access to perks:
https://www.youtube.com/channel/UCRQv...
If you liked this video, please consider subscribing: https://t.co/RZ4EwP0F2a
#Deanin #Rails6 #20in20