vue-turbolinks

import { turbolinksAdapterMixin } from 'vue-turbolinks'; import Vue from 'vue'; // A mock App component for demonstration const App = { template: '<div>Hello from Vue and Turbolinks! Count: {{ count }} <button @click="count++">Increment</button></div>', data() { return { count: 0 }; }, mounted() { console.log('App mounted!'); }, beforeDestroy() { console.log('App beforeDestroy!'); } }; document.addEventListener('turbo:load', () => { const element = document.getElementById("hello"); if (element != null) { new Vue({ el: element, template: '<App/>', mixins: [turbolinksAdapterMixin], components: { App } }); console.log('Vue app initialized on turbo:load.'); } else { console.log('No #hello element found, skipping Vue initialization.'); } }); // Simulate a Turbolinks/Turbo page load for demonstration // In a real app, this would be triggered by navigation. setTimeout(() => { const rootDiv = document.createElement('div'); rootDiv.id = 'hello'; document.body.appendChild(rootDiv); document.dispatchEvent(new Event('turbo:load')); }, 500); setTimeout(() => { const elementToRemove = document.getElementById('hello'); if (elementToRemove) { elementToRemove.parentNode.removeChild(elementToRemove); } document.dispatchEvent(new Event('turbo:before-cache')); // Simulate cache event }, 3000);