Use turbolinks:before-cache event instead of turbolinks:visit

Hi!

Have you tried this already? If there’s no known issues, I think before-cache is better because components would be alive and not removed from current page until new page is loaded.

Using turbolinks:visit with slow internet connection, components disappear from page before new page is loaded.

[connorshea]

So I had this problem and it was caused by the same thing as @nicklozon, where I had template code inside my .html.erb file.

<div id="game-library">
  <library
    v-bind:purchased-releases="<%= @purchased_releases.to_json(except: [:created_at, :updated_at]) %>"
  ></library>
</div>

And then in library.js, which I imported into my application.js:

import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import Library from './components/library.vue';

Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  let gameLibrary = document.getElementById("game-library")
  if (gameLibrary != null) {
    const library = new Vue({
      el: '#game-library',
      components: { Library }
    })
  }
});

^^^ the above is what it looks like when the problem exists. ^^^

@printercu’s script (this) worked for me, though it does seem like - based on nick’s comment previously - you can also avoid this problem by simply not including the Vue.js custom elements in the .html.erb files, e.g. by plugging it into a data- attribute and then mounting it on that, or something?

[printercu]

@nicklozon can you please give a try for https://gist.github.com/printercu/e202851c370ffc38bcdedeb8300d417e It should work fine both for .vue files and <script type='x-template'>. I don’t use div templates because they have some limitations/edgecases and can show template source on page while page load, so have not tested for them.

Compiled coffee => js

// Inspired by
// https://github.com/jeffreyguenther/vue-turbolinks/blob/master/index.js
// but changed to support going back to cached page with vue instance.
// Original version will keep instance created from cache along with new one.
var plugin;

plugin = {
  instances: [],
  bind: function() {
    // Destroy instances on current page when moving to another.
    document.addEventListener('turbolinks:before-cache', function() {
      return plugin.cleanupInstances();
    });
    // Destroy left instances when previous page has disabled caching.
    document.addEventListener('turbolinks:before-render', function() {
      return plugin.cleanupInstances();
    });
    // Clear instances on curent page which are not present anymore.
    return document.addEventListener('turbolinks:load', function() {
      return plugin.cleanupInstances(function(x) {
        return document.contains(x.$el);
      });
    });
  },
  cleanupInstances: function(keep_if) {
    var i, instance, len, ref, result;
    result = [];
    ref = plugin.instances;
    for (i = 0, len = ref.length; i < len; i++) {
      instance = ref[i];
      if (typeof keep_if === "function" ? keep_if(instance) : void 0) {
        result.push(instance);
      } else {
        instance.$destroy();
      }
    }
    return plugin.instances = result;
  },
  Mixin: {
    beforeMount: function() {
      // If this is the root component,
      // we want to cache the original element contents to replace later.
      // We don't care about sub-instances, just the root
      if (this === this.$root) {
        plugin.instances.push(this);
        return this.$originalEl = this.$el.outerHTML;
      }
    },
    destroyed: function() {
      if (this === this.$root) {
        // We only need to revert the html for the root component.
        return this.$el.outerHTML = this.$originalEl;
      }
    }
  },
  install: function(Vue, _options) {
    plugin.bind();
    return Vue.mixin(plugin.Mixin);
  }
};


// export default plugin
// or:
// Vue.TurbolinksAdapter = plugin
// plugin.bind()