Skip to main content

Rails & Vue.js Trello Clone - Part 1 Discussion

General • Asked by Chris Oliver

Glad you decided to do this :)


Great episode ! Do you think it's better to grab the json data rendered inside the html view or making an ajax call instead ?

AJAX will always be slower because you're making a second network request and will always force a 'loading' state on the Vue app. I personally hate waiting for widgets to load so I'd rather preload the JSON on the page and have an instantly available frontend.

thanks Chris, ...yes it makes sense :-)



I love these videos! I feel so pressured to go all-or-nothing with JavaScript, but I love the way you integrate the best parts of it into an already beautiful Rails app. Rails and Vue are a great pair


Hey Chris, I feel like a missed a couple of episodes leading up to this one. You use some gems here I am not familiar with like 'devise_masquerade' and a few others. Do you have either a copy of the code base that you started out with for this episode or can you point me to the episode(s) where you built everything we are starting with here? Thanks!

Yeah, I have a really basic template that installs Bootstrap, Devise, and Administrate. It's really nothing more than if you install those gems yourself and create a root page. I'll publish it sometime soon once I fix a couple bugs in it.

cc @mikemcclintock:disqus


Chris, seconding ccsalespro's comment, is there an episode where you kind of have a "stock" rails new app that has all of your favorite gems in them? I think I missed something here where you generated the admin stuff for Devise as well as a couple other things. Good work on these, I'm really enjoying it.


Chris, loved this series as well as the other on getting started with VueJS, Rails, and Webpacker.  How would you go about setting up an app with more than one Vue component?  I'm looking to sort of merge a Rails API only application with its seperate VueJS frontend.  However the application is somewhat complicated and has a lot of VueJS components.  It seems strange to create a new Vue instance for each of them, linked to a particularly ided element on the DOM.  It seems like a single Vue component, with multiple children, would make more sense but then I don't know how to set that up and still allow Rails to handle the majority of view rendering.
Hey Justin,

You can do multiple components on a page by creating multiple Vue apps. You'd basically just mount your different Vue apps to the appropriate tag, if you find them on the page. You won't necessarily have them on every page, so you'll need to conditionally check to set them up. 

This is what I do with the Vue-Turbolinks integration. You can see an example here that checks each turbolinks pageview for the components and then sets up the vue app. https://github.com/excid3/vue-turbolinks#running-vue-only-on-specific-pages

You'd just do the same thing basically. 

I also noticed that Laravel seems to have an interesting way of doing things that is using the whole server sided rendered HTML as the main component. It seems like it might be a really useful way of doing an even nicer middle ground.

Thank you Chris, I'll go with that approach.  It felt a little strange to have a dozen different components loading in that way but it definitely works!

Also, feel stupid but I can't figure out how to reply to your comment :)
I literally just rebuilt the comment system (replacing Disqus) so there are some bugs. 🤓

You can think of that approach as similar to binding your events in jQuery. I worked on a nice little wrapper for that which I need to release. And once I get a chance to check out this other approach, I'll let you know. Might be a better way to structure things. 

HI, 
I've tried to add webpacker in existing app, and error showed up as bellow. I've googled it for hours and still can't find solution, plz help me with some hint, Thank you so so much.

Webpacker::Manifest::MissingEntryError - Webpacker can't find application.css in <App-Path>/public/packs/manifest.json. Possible causes:

1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/application-6d6fda76e45f26772dbc.js",
  "application.js.map": "/packs/application-6d6fda76e45f26772dbc.js.map",
  "hello_vue.js": "/packs/hello_vue-8b47c03e0e5b1afe8a54.js",
  "hello_vue.js.map": "/packs/hello_vue-8b47c03e0e5b1afe8a54.js.map"
}
Hey Larry

Do you have still issue ? Its because webpack compiling no css... 
Check file in "app/javascript/packs/application.js" - initialy you have there just console log. So webpack will compile no css. 
Lets add this line "import App from '../app.vue'" and then run in terminal "bin/webpack" , aplication css should be generated 

Larry, me too:
Changing javascript_pack_tag is providing error
Webpacker::Manifest::MissingEntryError
Check my comment above, or watch video more furthure. Reason is becasue you have no css in your javascript files. You can remove pack tags and add them after you add some vue code. Just follow tutorial

HI there, 

i had the problem too. Could fix it with:
yarn install

If you have get the message "can't find executable webpack for gem webpacker" along the way you can fix it with:
bundle exec rails webpacker:binstubs

Hints came from:

I am running into some issues while following along here. I have a Rails 5.2 app running with Ruby 2.5.1. I can get through the installation of Vue, but when I try to render the component on the page nothing appears. No console warnings either. I tried to modify the rails content-security-policy like it was suggested in the webpacker documents, but nothing worked. 

Any thoughts?
Not sure, but you might check the git repo. I updated it to Rails 5.1 and Ruby 2.5 recently. Rails 5.2 shouldn't cause any differences but the webpacker gem does change frequently.
Thanks Chris. I cloned the project repo and was able to get it up and running. Originally I was attempting this walkthrough with your `jumpstart` template. I'll have to see if I can get this project working in that template. Thanks for your input and the quality work you produce!

I ran into the same problem. I noticed I didn't have
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
in my _head.html.erb file. Once I included that line, I got the Hello Vue! to render.


When I run the application in Docker, it can not execute on 5000 port.
I binding port docker at 5000:5000
What is happen?

Transcripts is wrong.
not rails g scaffold list new position:integer
but rails g scaffold list name position:integer


Hey, Chris Oliver .

Is there a chance for you to make a Part 0? I mean, from "rails new" to the state of your first commit?
I'm beggining with rails and your first commit is already quite advanced for me...

Best regards.

It's just an install of Bootstrap and Devise, both of which I've covered in other episodes. Just search for them and you'll be up to speed!


If you are using ruby 2.5.x and copy the project down make sure to update devise in your gemfile or you will face a bug.
gem 'devise', git: 'https://github.com/plataformatec/devise'


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.