jeffreyguenther / vue-turbolinks Goto Github PK

Hey Jeffrey!
Thank you for the solution, it was a nice idea.

But something is still wrong, could you please take a look? I'm not sure that this is related to the Turbolinks or your solution, it might be a VueJS bug, but anyway :)

I created a really simple form using rails-slim template:

.row.justify-content-center
  .col-sm-4
    h2 Create a new account
    = bootstrap_form_for @account do |f|
      = f.text_field :name, 'v-model': 'name'
      = f.primary 'Create Blog'
= javascript_pack_tag 'hello_vue'

It gives us an input field we need to use with VueJs:

<input type="text" name="account[name]" id="account_name" class="form-control">

And typical VueJs App:

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'

document.addEventListener('turbolinks:load', () => {
  const element = document.getElementById('new_account')
  if (element != null) {
    const accountName = new Vue({
      el: element,
      data: {
        name: '362'
      },
      mixins: [TurbolinksAdapter]
    })
  }
});

And it works well when I went to the page (two way binding, and so on, I'm able to see it in console)
Until I go to another page and come back twice :)

Look:

Here you can see the initial state when the page is just opened. Then I got to another page and use browser "Back" button to return to the page with the New Account Form. When I did it the first time you still see 362 in the input field, but the VueJs App is already stopped and doesn't work. When I returned the second time you can see that the field is empty at all :)

What do you think about it? Did I miss something?

Thanks for this plugin.

I'm trying to understand the purpose of vue-turbolinks. I found this plugin through the issue on vue repo.

Is the purpose of vue-turbolinks to fix the memory issues of un-mounting Vue components when turbolinks is switched on? If not, can you please explain :)

Hey there, and thanks for the great software! I wanted to contribute a note that might save some other users some time but I'm not sure how to do so. We have a Rails app with vue-turbolinks on the front end, and we were experiencing intermittent DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node. errors. The problem turned out to be using a component where the root was wrapped in a transition.

Render call:

    new Vue({
      el: $our_root_element,
      components: { AjaxModal },
      data() {
        return {vdata: base_data};
      },
      template: '<AjaxModal v-bind:vdata="vdata"/>'
    });

And the AjaxModal component starts like:

<template>
    <transition name="modal">
      <div v-if="vdata.ui_state.show" class="modal">
...

If the ajax modal was mounted on a page and then dismissed, we would get the DOM exception on the next turbolinks visit. The solution was to ensure the root component did not start with a <transition>:

<template>
  <div>
    <transition name="modal">
      <div v-if="vdata.ui_state.show" class="modal">
...

Hope this helps someone else - might be worth a note in the README?

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

I'm running into this error where if I have a very simple basic table from https://github.com/matfish2/vue-tables-2 on a page, if I go to another page and click back, or if I just click a link that reloads the same page, I get the errors below.

The rest of my app works fine with turbolinks/vue-turbolinks

I do use vue on every page. I'm using the latest 2.0 version of vue-turbolinks

I noticed this error only happens with https://github.com/matfish2/vue-tables-2 but also only happens if I'm using the "vuex" mode for the server-side tables. If I switch off vuex, then I don't get the error.. I'm pretty confused what's causing it but my app depends on using vuex server tables so hopefully you can give me some help fixing this problem

thanks!

TypeError: Cannot set property 'outerHTML' of undefined
    at Vue$3.destroyed (index.js:24)
    at callHook (vue.js:2872)
    at Vue$3.Vue.$destroy (vue.js:2682)
    at vuex.esm.js:567
    at Array.<anonymous> (vue.js:1798)
    at flushCallbacks (vue.js:1719)
    at <anonymous>
logError @ vue.js:1702
globalHandleError @ vue.js:1693
handleError @ vue.js:1682
callHook @ vue.js:2874
Vue.$destroy @ vue.js:2682
(anonymous) @ vuex.esm.js:567
(anonymous) @ vue.js:1798
flushCallbacks @ vue.js:1719
Promise resolved (async)
microTimerFunc @ vue.js:1767
nextTick @ vue.js:1811
queueWatcher @ vue.js:3018
update @ vue.js:3153
notify @ vue.js:686
del @ vue.js:1069
(anonymous) @ vuex.esm.js:482
_withCommit @ vuex.esm.js:495
unregisterModule @ vuex.esm.js:480
webpackJsonp../node_modules/vue-tables-2/compiled/state/register-module.js.module.exports @ register-module.js:21
webpackJsonp../node_modules/vue-tables-2/compiled/mixins/created.js.module.exports @ created.js:10
created @ v-server-table.js:65
callHook @ vue.js:2872
Vue._init @ vue.js:4504
VueComponent @ vue.js:4674
createComponentInstanceForVnode @ vue.js:4195
init @ vue.js:4012
createComponent @ vue.js:5463
createElm @ vue.js:5411
createChildren @ vue.js:5534
createElm @ vue.js:5439
createChildren @ vue.js:5534
createElm @ vue.js:5439
patch @ vue.js:5928
Vue._update @ vue.js:2617
updateComponent @ vue.js:2745
get @ vue.js:3086
Watcher @ vue.js:3075
mountComponent @ vue.js:2749
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:8322
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:10661
init @ vue.js:4018
createComponent @ vue.js:5463
createElm @ vue.js:5411
createChildren @ vue.js:5534
createElm @ vue.js:5439
createChildren @ vue.js:5534
createElm @ vue.js:5439
createChildren @ vue.js:5534
createElm @ vue.js:5439
patch @ vue.js:5928
Vue._update @ vue.js:2617
updateComponent @ vue.js:2745
get @ vue.js:3086
Watcher @ vue.js:3075
mountComponent @ vue.js:2749
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:8322
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:10661
init @ vue.js:4018
createComponent @ vue.js:5463
createElm @ vue.js:5411
createChildren @ vue.js:5534
createElm @ vue.js:5439
createChildren @ vue.js:5534
createElm @ vue.js:5439
patch @ vue.js:5967
Vue._update @ vue.js:2617
updateComponent @ vue.js:2745
get @ vue.js:3086
Watcher @ vue.js:3075
mountComponent @ vue.js:2749
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:8322
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:10661
Vue._init @ vue.js:4514
Vue$3 @ vue.js:4599
(anonymous) @ app.js:49
t.dispatch @ turbolinks.js:5
t.Controller.r.notifyApplicationAfterPageLoad @ turbolinks.js:5
t.Controller.r.visitCompleted @ turbolinks.js:6
t.Visit.r.complete @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
requestAnimationFrame (async)
t.Visit.r.render @ turbolinks.js:5
t.Visit.r.loadResponse @ turbolinks.js:5
t.BrowserAdapter.r.visitRequestCompleted @ turbolinks.js:5
t.Visit.r.requestCompletedWithResponse @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
t.HttpRequest.r.endRequest @ turbolinks.js:5
t.HttpRequest.r.requestLoaded @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
XMLHttpRequest.send (async)
(anonymous) @ VM57233:1
t.HttpRequest.r.send @ turbolinks.js:5
t.Visit.r.issueRequest @ turbolinks.js:5
t.BrowserAdapter.r.visitStarted @ turbolinks.js:5
t.Visit.r.start @ turbolinks.js:5
t.Controller.r.startVisit @ turbolinks.js:5
t.Controller.r.startVisitToLocationWithAction @ turbolinks.js:5
t.BrowserAdapter.r.visitProposedToLocationWithAction @ turbolinks.js:5
t.Controller.r.visit @ turbolinks.js:5
t.Controller.r.clickBubbled @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
vue.js:580 [Vue warn]: Error in destroyed hook: "TypeError: Cannot set property 'outerHTML' of undefined"

(found in <Root>)

Hi,

I'm using vue-turbolinks (globally) alongside Buefy components and it's been working great.

I'm now facing an issue where Snackbars and Toasts aren't shown the second and subsequent times they are triggered and there are no console errors.
Disabling vue-turbolinks restores the expected behavior of the snackbar, so the issue is most certainly in how turbolinks loads these components.

Many thanks.

vue 2.6.12
buefy 0.9.3
vue-turbolinks 2.1.0

Hi, the destroyVue() function got called more and more times when I click backward and forward. Seems the two destroyVue.bind(this) instances are different.

I'm having an issue using Rails + Vue + Turbolinks + Colcade, to position a grid of cards.

I have a simple grid of cards that loads fine initially via vue-colcade, however upon returning to the listing via the back button, the cards are not repositioned.

Our Vue is setup using vue-turbolinks as such

import Vue from 'vue/dist/vue.esm';
import VueColcade from 'vue-colcade';
import TurbolinksAdapter from 'vue-turbolinks';

Vue.use(VueColcade);
Vue.use(TurbolinksAdapter);

document.addEventListener('turbolinks:load', () => {
  const element = document.getElementById('app');
  const app = new Vue({}).$mount(element);
});

The component looks like

<template>
  <div id="cards" class="row cards">
    <div class="col col-sm-12 col-md-6 col-lg-4 d-block"></div>
    <div class="col col-md-6 col-lg-4 d-none d-sm-none d-md-block"></div>
    <div class="col col-lg-4 d-none d-sm-none d-md-none d-lg-block"></div>
    <div class="card shadow-sm mb-4" v-for="item in items" :key="item.id">
      <div class="card-body">
        <h5 class="card-title"><a :href="'/items/' + item.id">{{item.name}}</a></h5>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.$colcade.create({
        name: 'cards',  
        el: '#cards',  
        config: {  
          columns: '.col',
          items: '.card',
        },
      });
  }
};
</script>

I posted an issue on vue-colcade but think the problem is related to vue-turbolinks.

The First Page Loads Doest Do Any Console Error...
But Succeeding clicking on a vue router link...
what happen is the component for that vue is not rendered...
Lets say im on home, .Home.vue
then i navigated away to .About.vue for /about...

Hi,

First of all, thanks for the great mixin !

I have come across an error caused by the adapter when using a vue component library (Element UI). The Message component that displays a message at the top of the page that then disappears is causing a bug because at one point it needs to access the component's $el.parentNode after having destroyed it but because of the vue-turbolinks adapter, the element's outerHTML has been modified and parentNode is null.

Cannot read property 'removeChild' of null

I have reproduced this issue here:
https://codesandbox.io/s/j4k708vzy5

Is there a way to prevent this issue from happening at the adapter level ?

From what I've gathered, I think this is how you set it to a custom value?

Vue.use(TurbolinksAdapter, { turbolinksDestroyEvent: 'turbolinks:before-cache' })

In the readme, we write:

import TurbolinksAdapter from 'vue-turbolinks'
Vue.use(TurbolinksAdapter)

export default {
  data: function () {
    return {
      message: new Date
    }
  }
}

@excid3 I don't believe this works. There is no reference to Vue in app.vue, or any single file components. I think the lines to set up the mixin need to be added in the place where you call new Vue(...). Or am I missing something?

Sry if this isn't the place to post this, but I can't find anyone with same problem.

Fresh install of latest Laravel w/ Spark. Everything works great if app.js is in <body>, but the moment I move to suggested '` everything stops working.

If I put it before Spark scripts in head, I get Spark not defined error. If I put at the end of <head> I get Vue not defined.

Would love to get all of these playing nice together.

When using Rails View (RView) with separate javascript files, each loading Vue Components, this library throws errors and page renders odd as a result.

Reproduce

1. Setup 2 Rails views (RviewA and RviewB), each with their own JS file and and vue components and turbolinks
2. Using an href link, reference the other page.
3. Click back and forth between pages.

Observed

• RviewA renders fine when first loaded (or refreshed).
• Clicking link to RviewB, RviewB components not rendered. Javascript console errors

Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
...

• Clicking link back to RviewA, RviewA components rendered correctly
• Clicking link to RviewB one more time, parts of RviewA and RviewB components rendered (weird). Old/New Javascript console errors

Error in destroyed hook: "NoModificationAllowedError: Failed to set the 'outerHTML' property on 'Element': This element has no parent node."
(found in <Root>)
...

DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.
...

DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.
...

Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
...

• Refresh RviewB, view renders correctly.

Stack traces lead back to turbolinks and/or teardown code.

I uploaded a simple Rails app example of this here:
https://github.com/tleish/vuerails-test

Removing tubolinks and vue-turbolinks allows views with vue components to render as expected.

Bug or have I configured something incorrectly?

Found a possible bug with vue-turbolinks 2.0.4. When using it in conjunction with the vuetify library, it raises an error when closing a dialog/modal window.

[Vue warn]: Error in destroyed hook: 
  "NoModificationAllowedError: Failed to set the 'outerHTML' property on 'Element': 
   This element has no parent node."
DOMException: Failed to set the 'outerHTML' property on 'Element': 
  This element has no parent node. at VueComponent.destroyed

As it turns out, when you click a button to show the dialog, the beforeMount method from this plugin is called. In beforeMount, this and this.$root references the new dialog component. this.$originalEl is never set. this.$el is undefined as the dialog Dom has not yet been created. I believe the Dom created after.

Once the dialog IS mounted, this.$el is defined and references the overlay Dom (this.$el === div.v-overlay). When closing the dialog the app calls the vue-turbolinks destroy method and the conditional in that method evaluates to true, the method then calls this.$el.outerHTML = this.$originalEl. This is equivalent to this.$el.outerHTML = undefined since the beforeMount never defined the variable this.$originalEl. Hence the error "Failed to set the 'outerHTML' ".

Demo app reproducing the error: https://codepen.io/tleish/pen/MWwWLYa. Open a javascript console, click the button and close the dialog box a few times.

One possible fix might be:

    destroyed: function destroyed() {
      // We only need to revert the html for the root component
-     if (this == this.$root && this.$el) {
+     if (this == this.$root && this.$el && this.$originalEl) {
        this.$el.outerHTML = this.$originalEl;
      }
    }

Note: Similar, but slight different to Issue #17.

I've been using this for a few weeks and all works well, but there was this one problem that was really stumping me

Tonight I spent an hour debugging it and found out what was happening.

In my vue application I use a message bus. So in a few places I have these Bus.$on('this_and_that') listeners and in other parts of my app I have Bus.$emit('this_and_that'). I have dozens of these scattered through my app.

I was noticing that using turbolinks and vue-turbolinks, everytime I would visit a new page.. anything emitted to one of my Bus listeners would fire 2, 3, 4 etc times.. everytime I loaded a new page it would fire these events one extra time

In retrospect I see this makes sense.. although I thought I read somewhere that when the Vue teardown occurred the listeners were destroyed? not in my case I guess

I really struggled to find the correct way to prevent this from happening. I needed something that was the opposite of turbolinks:load. I wanted to attach the Bus.$on listeners only the first time my vue app was loaded (I have the same vue app on every page of my site)

I couldn't figure it out so I hacked something up. I simply used vuex to store the number of "page loads" which is initialized to 0, then on one of my top components in a beforeDestroy hook I increment the pageLoads state in the vuex store

And finally, I wrapped my Bus.$on calls with if(this.pageLoads === 0) { ... } so it only happens on the very first load

This is suuper ugly.. and worse I had to wrap like 25 Bus.$on calls with this ugliness

What am I doing wrong here?? what was I supposed to do?

Hi,

When initializing vue apps with the $mount() method, the app doesn't load on the first visit if you use turbolinks. This way, for example:

import Vue from 'vue'                                                                                                                                                                            
import TurbolinksAdapter from 'vue-turbolinks'                                                                                                                                                   
import ListRendering from './list_rendering.vue'                                                                                                                                                 
                                                                                                                                                                                                 
Vue.use(TurbolinksAdapter)                                                                                                                                                                       
                                                                                                                                                                                                 
document.addEventListener('turbolinks:load', () => {                                                                                                                                             
    const listRenderingApp = document.querySelector('list-rendering-app')                                                                                                                        
    if (listRenderingApp != null) {                                                                                                                                                              
        const app = new Vue(ListRendering).$mount(listRenderingApp)                                                                                                                              
    }                                                                                                                                                                                            
}) 

I have prepared a repo with two simple examples, each one on a different branch: https://github.com/ribanez7/rails-vue-playground

Branch "turbolinks" uses turbolinks, and you can see how, when visiting the root page and clicking any link (each link has a different vue app), on first visit you see nothing.

Branch "no-turbolinks" doesn't make use of turbolinks, and there everything loads ok.

Could you please let me know if this is actually an issue?
Thanks!

Hey there, first of: Thank you for this package, it really helps.

After upgrading from 2.0.1 to 2.0.2, I noticed a regression: When navigating with the browsers back/forward buttons, my Vue instances are not recreated. The DOM is still correct, but event handlers are not attached anymore.

I think it has to to with this commit: (mainly because there weren't any others)
14351a9

The Event changed from turbolinks:visit to turbolinks:before-render, that's probably the problem? I'm not sure.

I'm back on 2.0.1 for the time being, which still works great!

I hope this is clear and useful. If the problem is not obvious, I can also try to add a reproduction.

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.

Following the example from GoRails I can't seem to have mixins: [TurbolinksAdapter] work. I get the following in the console log:

Uncaught TypeError: Cannot read property 'props' of undefined
    at normalizeProps (vue.esm.js:1341)
    at mergeOptions (vue.esm.js:1443)
    at mergeOptions (vue.esm.js:1452)
    at Vue$3.Vue._init (vue.esm.js:4539)
    at new Vue$3 (vue.esm.js:4659)
    at HTMLDocument.<anonymous> (repositories.js:15)
    at Object.Turbolinks.dispatch (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6)
    at e.notifyApplicationAfterPageLoad (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7)
    at e.pageLoaded (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7)
    at turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6
normalizeProps @ vue.esm.js:1341
mergeOptions @ vue.esm.js:1443
mergeOptions @ vue.esm.js:1452
Vue._init @ vue.esm.js:4539
Vue$3 @ vue.esm.js:4659
(anonymous) @ repositories.js:15
Turbolinks.dispatch @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6
e.notifyApplicationAfterPageLoad @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7
e.pageLoaded @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7
(anonymous) @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6

Rails 5.2.0.rc1

grep vue yarn.lock

vue-hot-reload-api@^2.2.0:
  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz#683bd1d026c0d3b3c937d5875679e9a87ec6cd8f"
vue-loader@^14.1.1:
  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-14.1.1.tgz#331f197fcea790d6b8662c29b850806e7eb29342"
    vue-hot-reload-api "^2.2.0"
    vue-style-loader "^4.0.1"
    vue-template-es2015-compiler "^1.6.0"
vue-resource@^1.5.0:
  resolved "https://registry.yarnpkg.com/vue-resource/-/vue-resource-1.5.0.tgz#ba0c6ef7af2eeace03cf24a91f529471be974c72"
vue-style-loader@^4.0.1:
  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.0.1.tgz#252300d32eb97e83c1a1cb5b2029e2d8c3adcf9f"
vue-template-compiler@^2.5.13:
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.13.tgz#12a2aa0ecd6158ac5e5f14d294b0993f399c3d38"
vue-template-es2015-compiler@^1.6.0:
  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
vue-turbolinks@^2.0.1:
  resolved "https://registry.yarnpkg.com/vue-turbolinks/-/vue-turbolinks-2.0.1.tgz#7d4269faca88de22451c9dbed1976a714f3f2764"
    vue "^2.2.4"
vue@^2.2.4, vue@^2.5.13:
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.13.tgz#95bd31e20efcf7a7f39239c9aa6787ce8cf578e1"

For now I'm using

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'
import VueResource from 'vue-resource'

Vue.use(VueResource)
Vue.use(TurbolinksAdapter)

for the beginning of the file and it works mostly. Clicking edit on anything though won't show the values in their fields without refreshing. Even though I can use the VueJS chrome tool and see that the properties exist in the JavaScript object correctly.

When I'm on a page with a vue component mounted, and I click on a link to load a different page inside my app, I see the entire page (because my Vue app takes almost the entire viewport) blink, every single time.

Is this by design? Any way to avoid it ? It's very bad for UX the way it is.

Anyways, congrats for the nice gem!

Hi there,

I've followed the Readme tutorial but it seems I can't make this package work right.

I want my Vue app (in a specific JS file) to work on a specific page. I call the JS file from the bottom of the haml view file with javascript_pack_tag helper.

There are several situations:

1. I load my new.html.haml page : my Vue app is called. ✅

2. I load another page (such as index.html.haml), then I click on a link going to new.html.haml page : my Vue app is not called. 🚫 From what I read here rails/webpacker#354 it seems that turbolinks:load is called before the JS file is processed.

3. I load my new.html.haml page : my Vue app is called. I click on a link going to new.html.haml page : my Vue app is called again. I click once again on this link, and the Vue message is displayed two times in console instead of one 🚫 (the number goes from 2 to 4):

Then I click a last time on this link, and everything goes wrong 🚫 🚫 🚫:

Here are my files:

my_specific_controller/new.html.haml:

#my-specific-div
    %template{'v-if' => 'hello'}= 'Hi there'
    %template{'v-if' => 'bye'}= 'Bye bye'

= javascript_pack_tag 'specific_controller/new'

javascript/packs/specific_controller/new.js:

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'

Vue.use(TurbolinksAdapter)     

document.addEventListener('turbolinks:load', () => {
    var element = document.getElementById('my-specific-div')
    if (element != null) {
        new Vue({
            el: '#my-specific-div',
            data: {
                hello: true,
                bye: false
            }
        })
    }
})

I suppose the javascript_pack_tag is called each time the page is loaded, so I should remove the event listener (document.removeEventListener('turbolinks:load')) before adding another one, but then my JS scripts would become a bit verbose (they already are, with addEventListener, getElementById and if (element != null)).

What do you think of it? 🐢

This is the new version of vue.js that comes with the updated webpacker...
Notice how the vue app is call in the html by a stylesheet_pack_tag method.
Is there anyway to make that work?

/* eslint no-console: 0 */
// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> and
// <%= stylesheet_pack_tag 'hello_vue' %> to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Vue</div> at the bottom of the page.

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

document.addEventListener('turbolinks:load', () => {
  document.body.appendChild(document.createElement('hello'))
  const app = new Vue(App).$mount('hello')

  console.log(app)
})

something need to click twice for the rails link in order to show content

import Vue from 'vue/dist/vue.esm'
import Videos from './videos/videos.vue'
import TurbolinksAdapter from 'vue-turbolinks';
document.addEventListener('turbolinks:load', () => {
  var vueapp = new Vue({
    el: "#video_list",
    template: '<Videos/>',
    mixins: [TurbolinksAdapter],
    components: { Videos }
  });

});

I'm getting the following error in the console after implementing this plugin. I've confirmed that I'm on version 1.0.1. Any idea @jeffreyguenther?