Component is kept on cached page until next visit

Hi, and thanks for the plugin!

I’ve found that there can be 2 similar components on page when returning back to page which was previously cached:

• Open page with component
• Go to another one
• Return to first one (via visit, not back button).

When component is created with inline js in page, it runs twice on second visit: when page is shown from cache and then for fresh one. This is not a problem in most cases, but my component was polling some api (it’s stopped in beforeDestroy), so I noticed that all requests are doubled.

I’ve slightly changed original plugin to handle such cases. It’s made with coffeescript and uses jquery - i’m not familiar with modern js. However, i hope this may help:

components = []

# Destroy components on current page when moving to another.
$(document).on 'turbolinks:visit', ->
  component.$destroy() for component in components

# Clear components on curent page which are not present anymore.
$(document).on 'turbolinks:load', ->
  for component in components
    component.$destroy() unless $.contains(document, component.$el)

Vue.TurbolinksAdapter =
  beforeMount: ->
    # If this is the root component,
    # we want to cache the original element contents to replace later.
    # We don't care about sub-components, just the root
    if @ == @$root
      components.push(@)
      @$originalEl = @$el.outerHTML

  destroyed: ->
    # We only need to revert the html for the root component.
    @$el.outerHTML = @$originalEl if @ == @$root

[printercu]

Hi! Any update on it? Did sample app help? I’ve found an issue in my original mixin that it didn’t clean up old instances. Here is updated one, which can be used either as plugin or as mixin: https://gist.github.com/printercu/e202851c370ffc38bcdedeb8300d417e

[jeffreyguenther]

Are you encountering any other issues if you follow the pattern set out by @excid3?

If you’d prefer a more structured approach to page specific JS, check out https://github.com/kieraneglin/punchbox. It hides away some of the complexity of needing to test for the presence of an element. Both approaches work great and allow multiple Vue components on a page.

If there’s no bug present, I’m going to close this issue.