Vue.js Components in Rails Views Discussion

Jaroslav Horák April 13, 2018 12:15pm

Nice video. What about Vue state managment in Rails. When one Vue component mess with state of another Vue component?

Yar Htut April 19, 2018 10:05pm

Chris had done a really nice tutorials for Vue + statemanagement tutorial series https://gorails.com/series/vuejs-trello-clone-in-rails

gafemoyano April 15, 2018 4:50pm

Hey Chris

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.

inopinatus April 16, 2018 12:30am

This approach makes for nice DRY looking code. Beware of what happens what browsers parse HTML into the DOM, though. For example, if you write

<table>
  <row-component></row-component>
  <row-component></row-component>
</table>

the browser may say "hey, the row-component element is not valid inside a table!" during parsing and hoist them out, making it effectively

<row-component></row-component>
<row-component></row-component>
<table></table>

before Vue runs, which is not what you wanted, and there are other cases besides. Arguably it's always a concern when mounting components on an existing document, but becomes more likely when writing in this style.

Admin Istrator April 18, 2018 8:45am

Great episode Chris! Would it be possible to have something similar to stimulus [1] `definitionsFromContext` helper. A strong [naming] convention would reduce the manual import of vue components. Do you have a smart idea on this?

[1] https://stimulusjs.org/handbook/installing#using-webpack

Admin Istrator April 27, 2018 9:57pm

Component registration: around ~4:30 Min

https://www.vuemastery.com/conferences/vueconf-2018/7-secret-patterns-vue-consultants-dont-want-you-to-know-chris-fritz

https://github.com/chrisvfritz/7-secret-patterns

Thomas Connolly April 21, 2018 7:23pm

Second time I tried to install webpack and vue. Keep getting this error and I don't have a clue as to how to fix it. rails installed both webpacker and yarn ok, and I have node on my system. Here's the error:
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?

Rob Carruthers May 9, 2018 9:00pm

Hi Chris, nice work in this. I'm really excited about VueJS and the potential it has to streamline the Rails frontend dev process.

Some simple handy component examples would be very helpful ie. Form components like file_field with appropriate behaviour or table rows with CRUD actions.

Rob Carruthers May 13, 2018 11:01pm

Ok, after some research I found bootstrap-vue, which makes it easy to build out these components and super easy to drop them into a Rails app.
https://bootstrap-vue.js.org/docs/#individual-components-and-directives

victor hazbun May 14, 2018 1:28am

Pure gold.

Alexandre Duval June 13, 2018 8:32am

Thanks

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

Aleksandr Shelestov June 13, 2018 3:31pm

Unfortunately, this cool method is not a better way to include components to an existing layout.

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.

Rob Carruthers August 15, 2018 11:08pm

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?

Chris August 29, 2018 6:20pm

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?

jusko April 5, 2019 6:34pm

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.

inneroot October 3, 2018 12:51pm

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:

...". Donno how to fix this collision.

fregadetto January 18, 2019 6:21am

This is really neat.

fregadetto January 21, 2019 7:47am

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 )?

B February 11, 2019 5:59pm

Brilliant streamlining technique by adding vue into the data-behavior! #gamechanger

lunarfyre February 13, 2019 12:39am

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.

molfar March 10, 2019 8:48pm

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?

Carl Tanner August 1, 2019 3:41am

Thanks for the insight Chris. It took me a while to wrap my head around this one.

Travis Smith October 24, 2019 4:37pm

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?

maran April 16, 2020 2:37pm

Did any of you guys solve this for production yet?

Yi Mei Wang May 14, 2020 7:08pm

Guys, I feel very stupid asking this but I still don't understand what is the purpose of data-behavior="vue" to initialize the Vue instance. How does this differ compared to doing <div id="app"><%= yield %></div> ? It feels like the serve exactly the same purpose.

Ben Koshy August 11, 2021 12:45am

This looks like Rails UJS born-again: add in a simple html attribute and BOOM: you get all this functionality for free with minimal effort. I would also add that if this approach is combined with a stimulus controller: and you can load and initialize vue components via AJAX, or turbo_frames, or even turbo streams. best bit.