Should Turbolinks be disabled if --webpack=vue|react|ng options is used?

[mortyccp]

From my understanding, Turbolinks does't not compatible nicely with these MV* frameworks. In the current template with --webpack=vue option, Turbolinks is still enable by default. I think Turbolinks should be turn off if the rails project is init with these MV* options.

[gauravtiwari]

@soapsign Turbolinks integrates well, it's just that you have to use Turbolinks DOM events. For ex, normally, we would use DOMContentLoaded, but this would change in case of turbolinks to,

// document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('turbolinks:load', function() {
  const app = new Vue({
    el: '#vue-app',
    template: '<App/>',
    components: { App }
  })

  console.log(app)
})

It's same for React and Angular. Obviously, if you use things like react-router or any client side router having turbolinks wouldn't make sense. You could then manually remove the gem in that case :)

[gauravtiwari]

Or you could also pass -J option along-with rails new app_name -J --webpack=vue to not add turbolinks.

[mortyccp]

OK. Maybe we should change the generated example and comment about the action to be taken if people is going to include any client side router. Btw, great work for the webpack integration for rails. 👍

[gauravtiwari]

Yeah that sounds like a good idea @soapsign 👍 Feel free to make a PR if you want :)

[ankitrg]

@gauravtiwari

document.addEventListener('turbolinks:load', function() {
  const app = new Vue({
    el: '#vue-app',
    template: '<App/>',
    components: { App }
  })

  console.log(app)
})

Won't this code warn on every page if id #vue-app is not present on that page? How do we tackle that?

[gauravtiwari]

@ankitrg Just check if node is present on that page and if it does then bootstrap the vue component.

if (document.getElementById('vue-app')) {
  document.addEventListener('turbolinks:load', () => {
    Vue({
      el: '#vue-app',
      template: '<App/>',
      components: { App },
    });
  });
}

You could also dynamically check certain id or class name and bootstrap based on that (to avoid duplication).

[ankitrg]

@gauravtiwari I was planning to do this.

Can you please tell me more about what you meant by:

You could also dynamically check certain id or class name and bootstrap based on that (to avoid duplication).

[gauravtiwari]

Cool 👍 Sure @ankitrg It would require a bit more setup though. It's sort of based on the technique react-rails and few other similar gems uses. Loosely you can do something like this,

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
  // Vue component
  const HelloVue = {
    data: function () {
      return {
        message: "Hello Vue!"
      }
    }
  }
  window.HelloVue = HelloVue;
  module.exports = HelloVue;
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

<div id="vue-component" data-vue-component="HelloVue"></div>

const vueNode = document.getElementById('vue-component');
if (vueNode) {
  const componentName = vueNode.getAttribute('data-vue-component');
  // Assigned the class object to window earlier
  const componentConstructor = window[componentName];
  document.addEventListener('turbolinks:load', () => {
    Vue({
      el: '#vue-app',
      template: `<${componentName} />`,
      components: { componentConstructor },
    });
  });
}

But, not sure this would work as it is. Probably, you might bump into some issues :)

[gauravtiwari]

@ankitrg This works

import Vue from 'vue'
import App from './app.vue'

window.HelloVue = App;

/*
  // May be make a register.js file that does this and include it to main packs file
  Register components globally
  window.ComponentX = X;
  window.ComponentY = Y;
*/


document.addEventListener('DOMContentLoaded', () => {
  const vueNode = document.getElementById('vue-component');
  if (vueNode) {
    const componentName = vueNode.getAttribute('data-vue-component');
    // Assigned the class object to window earlier
    const VueComponent = window[componentName];
    document.addEventListener('turbolinks:load', () => {
      const app = new Vue({
        el: vueNode,
        template: `<VueComponent/>`,
        components: { VueComponent },
      });

      console.log(app);
    });
  }
});

[ankitrg]

@gauravtiwari This looks awesome. I still have two questions if you don't mind answering:

1. Why we need both DOMContentLoaded and turbolinks:load wrapper?
2. This implementation can only handle one component in the view, right?

[ankitrg]

@gauravtiwari Can we also achieve this using Vue.Component, like:

Vue.component('my-component', {
  // options
})

register a global component, you can use Vue.component(tagName, options)

This is what the doc says.

Then I can just use <my-component> in my view, no need to refer it by id? Please tell me if I am missing something, I am also new to Vue.

[gauravtiwari]

1. Why we need both DOMContentLoaded and turbolinks:load wrapper?

You don't. If you use turbolinks:load you don't need DOMContentLoaded and vice-versa.

2. This implementation can only handle one component in the view, right?

That's right. But you can customise that - getElementById will return array if there are multiple nodes with same id.

const nodes = document.getElementById('vue-component');
for (let i = 0; i < nodes.length; ++i) {
   var vueNode = nodes[i];
   var componentName = vueNode.getAttribute('data-vue-component');
    // Assigned the class object to window earlier
    const VueComponent = window[componentName];
    document.addEventListener('turbolinks:load', () => {
      const app = new Vue({
        el: vueNode,
        template: `<VueComponent/>`,
        components: { VueComponent },
      });

      console.log(app);
    });
}

[gauravtiwari]

@ankitrg It seems you can do that. Feel free to try it out and see how it goes :) Have fun!

[andersodt]

I'm having some trouble getting this to work -- using the example code, it loads properly on the first page load, but if I navigate away and come back via turbolinks, the vue component no longer renders (in fact, the component stays loaded the entire time). In React I can unload and load components on the fly after turbolinks:load -- can/should I do the same here?