Aleksandr Shelestov


40 Experience
0 Lessons Completed
0 Questions Solved


Posted in Vue.js Components in Rails Views Discussion

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.

You think using both variable wordings underscore and camelcase is good? :)

Hm, that's cool, until you need to validate the form and show and handle all these nested validation errors. It requires much more efforts than the Rails nested_attributes.

And, as I see, Turbolinks doesn't allow you reuse the VUE form when you click the back button in browser, even if you use this TurbolinksVUE library. The form will be activated just once by VueJS, when the page was loaded. Check this out :)

It still doesn't work in some cases. I did the same and tried to go 'home' and back and I caught errors like:

[Vue warn]: Error in destroyed hook: "NoModificationAllowedError: Failed to set the 'outerHTML' property on 'Element': This element has no parent node."


DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.

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

© 2023 GoRails, LLC. All rights reserved.