Problem with Turbolinks

[yamakrane]

Hi,

When using Turbolinks for SPA like UX, the Vue component disappears whenever I click a link.

1. I tried putting the component inside a livewire component.

2. I put the component inside the layout blade

Both scenarios didn't work.

Installation process using NPM and imported 'livewire-vue' inside the Vue component.

Thanks

[kyoudaiai]

I can confirm I'm getting the same issue. I'm mounting a vue component conditionally from within livewire on initial load / mount the component display correctly. once any link on the livewire component is clicked the vue component just disappears however I can see the DOM changes as livewire is feeding new props to the vue component but it's just not rendering.

I've been banging my head now for few days over this. I've other vue components being fired conditionally also on the same livewire which seems to be working fine on validation and other changed initiated within livewire.

[michgeek]

Have you guys installed the turbolinks vuejs plugin? https://github.com/jeffreyguenther/vue-turbolinks It is needed to tear down and mount components on page load.

[tanthammar]

You might have to wrap some components with wire:ignore and you probably want to instantiate vue on tubolinks:load.

Also the vue-turbolinks plugin solves many issues.

    document.addEventListener('turbolinks:load', () => {
        let element = document.getElementById('app')
        if (element != null) {
            let App = new Vue({
                el: element,
            })
        }
    });