Ask A Question

Notifications

You’re not receiving notifications from this thread.

Rails & Vue.js Trello Clone - Part 1 Discussion

Glad you decided to do this :)

Reply
Thomas Galibert Thomas Galibert

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

Reply

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.

Reply

Great ep. Chris

Reply

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

Reply

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!

Reply

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

Reply
mikemcclintock mikemcclintock

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.

Reply
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.
Reply
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.
Reply
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 :)
Reply
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. 
Reply
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"
}
Reply
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 
Reply
Larry, me too:
Changing javascript_pack_tag is providing error
Webpacker::Manifest::MissingEntryError
Reply
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
Reply

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:

Reply
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?
Reply
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.
Reply
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!
Reply

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.

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

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

Reply

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.

Reply

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!

Reply

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'

Reply

Hey Guys, i a, having an issue in my app.vue.

this line has an error, that list.cards , cards to be specific, is an unresolved variable. Anyone with an idea what might be wrong?

Reply

Well, if anyone is watching this video now. Use the jumpstart template instead of trying to set the whole thing up from scratch because that might take a lot of time if you are a beginner like me.

Jumpstart: https://github.com/excid3/jumpstart

Reply

Note if anyone else has trouble starting foreman following on on this, i found that i needed to manually start Redis, via the redis-server command in the terminal - https://stackoverflow.com/questions/36155607/error-connecting-to-redis-on-127-0-0-16379-errnoeconnrefused-wercker

Reply

Hey Chris,

Big fan of your tutorials. I was exploring this series but it looks like I am expected to have a base codebase set up before I execute the first command you discuss in your first video in this series. If you can take some time to enlighten us on the initial steps, that'll really help people who are learning Rails as a beginner.

Thanks,
Shubham

Reply

Anybody started this project in 2023? Having some real headaches with Vue/ Webpacker at 9:00. Sounds like webpacker retired?

Reply

Yeah, thankfully webpacker is no longer the way to go. Unfortunately Rails didn't pick just one option to replace it, they left it open ended.

Personally, I use esbuild with https://github.com/rails/jsbundling-rails.

Reply
Join the discussion
Create an account Log in

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

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

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

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

    © 2024 GoRails, LLC. All rights reserved.