Vue.js Components in Rails Views Discussion
How would you go about showing images uploaded via ActiveStorage on your vue components?
In ERB the image tag magically renders the image, but I'm not so sure how it would work on the webpacked vue files.
<table> <row-component></row-component> <row-component></row-component> </table>
<row-component></row-component> <row-component></row-component> <table></table>
Webpacker can't find application.js in /home/tom/paul/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:
{
}
You never seem to get errors. How is that?
Some simple handy component examples would be very helpful ie. Form components like file_field with appropriate behaviour or table rows with CRUD actions.
https://bootstrap-vue.js.org/docs/#individual-components-and-directives
By following your pattern with Turbolink/ [and data-behavior="vue »], it works perfectly on localhost, but yield not load in production (heroku) even if build success, and compiling asset «seems» good.
Have you already got that type of behavior ?
thanks
First of all, VUE will parse all the page, starting from data-behaviour="vue". So it could be a really hard load.
The second, parsing the page rewrites the DOM. So all your other non VUE stuff and events won't work anymore (like jQuery or Bootstrap plugins, etc.) Or they must be initialized after VUE did its job.
So it could be a trick to make them work together.
Using this approach, how would you get rails data into a component?
Eg. In "Using VueJS for Nested Forms in Rails: Part 1" you get a reference to the form div element and then parse the element dataset. But with this approach the element could be anything and how would you get a reference to the element in a SFC?
Unfortunately, I'm seeing the same behavior as Alexandre Duval; this works great in the development environment, but silently fails in production after precompiling assets. Are there some config changes needed to get this working after precompilation?
FWIW to anyone having similar problems, I struggled with this because the webpacker docs instruct you to allow unsafe-eval in development without making the implications of this clear for production.
All work good! Thx for lesson. But i have an issue whan using ckeditor gem. Got error on pages with ckeditor :""[Vue warn]: Error compiling template:
So, which way is best to implement Bootstrap and Vue in Rails 5.2? Keep the original Bootstrap4/jQuery sass lineup and use Vue where it is needed or a setup with Bootstrap-Vue ( https://bootstrap-vue.js.org )?
Great tutorial, this was exactly what I needed to make including vue components not feel kludgy! This should be included in the vue webpacker example, seems like a very elegant solution.
Chris, thank you for amazing tutorial. I have one question, you didnt cover in this video.
How to deal with ajax loaded content?
Lets say we have remote link, wich JS response dynamically creates modal box (fancybox form example) with html content.
The problem is that if that modal's html content includes "components" tags, they are not initialized as (converted to) working Vuejs components. How to make Vuejs work with Rails ajax functionality?
Using the inline-template in this way is an interesting way to use ERB inside your Vue components, but is there a way to do that using the traditional single-file-component approach? Something along the lines of the rails-erb-loader to create ###.vue.erb files?
