Rails webpack and vue

Question

How can I define a root component with Vue, that wraps my entire code, so all other components are descendants from that root?

Basically I would like to achieve something like:

In application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_pack_tag    'application' %>
  </head>

  <body>
    <div id="root">
      <%= yield %>
    </div>
    <%= javascript_pack_tag 'application' %>
  </body>
</html>

and then on my webpack entry point

...    

import Vue from 'vue';

var app = new Vue({
  el: '#root'
 })

However, when I do this I got a Vue warning that says:

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

So, from what I understood, this happens because I need to put my vue components inside .vue files but then, if I do that, how can I still use the yield statement to implement the rest of the views the "rails way"?

In the end, I guess, it all resumes to how can I organize my frontend using vuejs, webapack only(no asset pipeline) in rails and but still use some of the rails features like yield to render the "normal" views?

P.S: I already saw the hello world example that comes when you start a new project with webpack, but it's to simple...

Try adding vue: 'vue/dist/vue.js' to your webpack aliases. — webnoob
– webnoob, Commented Jan 27, 2018 at 18:30
I don't think you'll be able to do what you're wanting to do - if you want to use Rails views and have them render then the vue root element has to be different, otherwise vue will replace the contents of that with it's rendered content. You could add another element before the yield which would be your vue's root. But either way, I'm not sure of what you're wanting to achieve here. If you just want to use some vue components, mount them whenever/where you need them? — m3characters
– m3characters, Commented Jan 27, 2018 at 18:47
@webnoob thanks, that worked! What does it do "under the wood"? — Nuno
– Nuno, Commented Jan 27, 2018 at 18:48
@MicaelNussbaumer I just did what webood said and it worked! — Nuno
– Nuno, Commented Jan 27, 2018 at 18:49
@Nuno I've added an answer for you. I've also added some references to it to explain where I got my info from (I had this same issue when generating a Dynamic component that I pass HTML into). — webnoob
– webnoob, Commented Jan 27, 2018 at 19:41

webnoob · Accepted Answer · 2018-01-27 19:46:30Z

Try adding vue: 'vue/dist/vue.js' to your webpack aliases file. I've had to do the same when I'm rendering component templates that don't fit the normal model for vue templates (i.e dynamic based content).

This post by Evan You (Vue's creator) explains about the runtime only build (which this is) via this link specifically, the bit we're looking at is this:

Runtime only build: since it doesn't include the compiler, you need to either pre-compiled templates in a compile step, or manually written render functions. The npm package will export this build by default, since when consuming Vue from npm, you will likely be using a compilation step (with Browserify or Webpack), during which vueify or vue-loader will perform the template pre-compilation.

This means the version we normally use doesn't have the compiler so we need to include it via the alias which then gives us access to:

Standalone build: includes both the compiler and the runtime. This functions basically exactly the same Vue 1.x does.

As this has the compiler in, it allows your template to be compiled which it needs to be because it's not part of the standard Vue file templating.

Well, that is at least my take on the whole thing :)

Collectives™ on Stack Overflow

Rails webpack and vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related