Skip to main content

Vue.js Components in Rails Views Discussion

General • Asked by Chris Oliver
2140125e280426d3965997f01d9120ef
Nice video. What about Vue state managment in Rails. When one Vue component mess with state of another Vue component?
D1a344b0842405214719bb0080bae06c
Chris had done a really nice tutorials for Vue + statemanagement  tutorial series https://gorails.com/series/vuejs-trello-clone-in-rails


Ecc862693cfb602cfedcd9a2a5570e26
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.

7a515c88e77c933cfc59ddc8ca139964
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.

78b4732ea7d8d4b32850a89eb96ff8c5
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?

6e13e60f4c0cb8d2e1e251272613d9d4
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?

1c0c9e5b745dffce78458689d315fc71
Great episode as always!

One minor warning to anyone looking to build out applications that are potentially larger in scale, or even just Vue heavy with a fair mix of ERB/HAML. 

The way Vue parses applications targeting a wrapper such as the main/section/div, or with inline-templates is such that it walks the entirety of the DOM tree contained within the target to make the replacements to what will be considered for Vue render. Vue2 optimizes for compiled template render (templates built and compiled from your JS components) and has significantly worse performance than Vue1 for this technique (which relied very heavily on being able to just drop into your existing traditional server-side template much like Angular). Not a concern for small/medium projects but the Mobile performance for larger applications can suffer quite a bit.

Like anything, it can be taken with a grain of salt and your own mileage will vary. I know for the company I work for we have a significant amount of Vue built with this technique, and it has been a limiting factor for being able to migrate from Vue1 -> Vue2.

4bb24499d3d2bce521ff898bd42680ac
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.
4bb24499d3d2bce521ff898bd42680ac
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

Faff411a9ca427b444717ca9044a8e4f

85f00641dfe05a49c71ecbb50528f7e5
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

B24ea3cf22447e96c86e8fc247b6f67d
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.


4bb24499d3d2bce521ff898bd42680ac

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?


Af64d51285c2a4a003e519b8573d7e4d

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?


1840a19355b883e8812d2d289c4413f8

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.

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 18,000+ developers who get early access to new screencasts, articles, guides, updates, and more.

By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

More of a social being? We're also on Twitter and YouTube.