All threads / Vue.js Trello Clone in Rails - Part 8 Discussion
Ask A Question


You’re not receiving notifications from this thread.

Vue.js Trello Clone in Rails - Part 8 Discussion

This is excellent! Opened my eyes on usefulness of Vue.js. As someone vested in Rails for many years, I would love to see a parallel series on creating the same Trello Board application using React JS. That would be very useful for Rails developers.

Steven Hansen ·

would be great to see an episode on how you test all of this through UI

Gustavo Parolin ·

Hey Chris, I'm learning a lot with you. Thanks.
Would be great to see this project handling with multiple boards.

Hi Chris,

Since upgrade to rails 5.1.5, the Rails.ajax call doesnt work anymore. No errors in log, nothing in the console, .. After a regression to 5.1.4 everything is working well, so this behaviour is due to the last rails version but I dont find where (I read the rails-ujs commits but found nothing, ...) 

Does anybody have the same issue ? 
I have the same issue too.

It's working for me. I had to do 
yarn add rails-ujs 
import Rails from 'rails-ujs'
 in my pack file
I'm getting the same issue...but only on the editCard method.  The save button is now updating the card name via rails, but it doesn't immediately display in the browser via Vue.  (Only upon refresh is the updated card name shown).  Any ideas Chris?  thanks!

I'm having the same issue as BB and others on newer versions of rails. Cards and lists are being created, but they only display on another browser upon refresh.

From the terminal, I can see that the commit is sent to action cable, but the payload is showing up as a crazy looking string that starts off with an html doctype (which seems to be be way off from the pretty json data it should be outputting).

I feel like the issue may stem from the board_channel.js file I have, since console.log(data) (@13:15 in the video) doesn't even get fired. If anyone figures this one out, let me know! I've been banging my head against the wall for the better part of a day.

How to delete a list or card?


Great series Chris! Really helped wrap my head around getting Vue to play nice with Rails.

Definitely would love more Vue + Rails tutorials if its in your queue.

Keep up the good work!

any tips on how to deploy this kind of setup ? rails and vue should have a webpacker running alongside it ? or it is not relevant ?
I cant seem to get any data displaying on production env despite having the json in data attribute available

I'm having this problem too with a heroku deploy; anytime I refresh the page the cards disappear dispite the JSON data being rendered.

Chris - an awesome series, as usual! Question: (and I saw this on the active cable video too) when you checked for a logged in user, you dropped down to Warden. Why do this as opposed to just calling the Devise methods like signed_in?


That is really awesome! - Can you make a similar tutorial trying to make the same with Stimulus? - or would you not really use Stimulus for something like this?

Really great stuff! going trhough the whole series it really helps to understand the power of vue as well as vuex and how both simplifies the way of dealing with data passing though components. Just want to go deeper into it now.

Such a great introduction to Vue and Rails together. Thanks for getting this series put together!

Awesome tech stack. This is the way to go. Thanks for showing us!

I am trying to extract mutations and store into its own store folder with store.js file. However, this.$store in Rails.ajax function is not working, it is returning undefined. While this.$store in other functions like computed is working fine.

Can find the code here:

Has anyone deployed this to Heroku? It works great on my local server but once deployed to Heroku I have to refresh to see a card or list added.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 70,078+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.