Skip to main content
Dc35da79ad055faf34c7be67414b0c16

Rails & Vue.js Trello Clone Tutorial Series

In this series, we'll build a clone of Trello using modern Javascript using Vue.js and a backend in Ruby on Rails with realtime activity using ActionCable. This is a great intermediate level series showcasing how to approach using Ruby on Rails with modern Javascript and how these frameworks can talk to each other.

Fallback 16:12
Rails & Vue.js Trello Clone - Part 1
#217 ·

Set up Rails models, scaffolds, and webpacker with Vue.js to start rendering our views

Fallback 10:31
Rails & Vue.js Trello Clone - Part 2
#218 · Pro

Adding new cards to our Vue app, persisting them in Rails, and re-rendering our UI

Fallback 10:15
Rails & Vue.js Trello Clone - Part 3
#219 · Pro

Implement the Vue.Draggable plugin to add drag and drop support to our Vue.js application and sync the changes to the server

Fallback 13:02
Rails & Vue.js Trello Clone - Part 4
#220 · Pro

This episode we handle drag and drop of cards in their own column and also between columns in our boards

Fallback 6:55
Vue.js Trello Clone in Rails - Part 5
#221 ·

Improve the design of our Vue.js & Rails clone of Trello by making lists more visually distinct and setting up horizontal scrolling

Fallback 14:45
Vue.js Trello Clone in Rails - Part 6
#222 · Pro

Refactoring our trello clone into sub-components and introducing a global datastore to really clean up our code

Fallback 23:14
Vue.js Trello Clone in Rails - Part 7
#223 · Pro

In this episode, we add card component, editing of cards, and the ability to create new lists

Fallback 17:38
Vue.js Trello Clone in Rails - Part 8
#224 · Pro

Adding Vuex as our Data Store gives us the ability to add realtime updates to our trello clone across browsers using ActionCable