Rails & Vue.js Trello Clone - Part 1 Discussion
Dan Chap
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 ?
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.
Tyler Bodway
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
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.
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.
Also, feel stupid but I can't figure out how to reply to your comment :)
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.
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"
}
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
Changing javascript_pack_tag is providing error
Webpacker::Manifest::MissingEntryError
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:
Any thoughts?
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.
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'
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?
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
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
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
Anybody started this project in 2023? Having some real headaches with Vue/ Webpacker at 9:00. Sounds like webpacker retired?
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.