Hi Tania.

Sorry for the delay.

Turbo Drive changes how page navigation works - instead of full page reloads, it uses AJAX to fetch new pages and replaces just the content.

This conflicts with the KT theme's initialization process because:

• KT components initialize on DOMContentLoaded or load events
• When Turbo navigates, these events aren't fired again
• Theme components that expect a full page reload aren't being properly re-initialized

Could you please try these steps:

1. Uncomment and modify the attributes in your webpack_encore.yaml:

webpack_encore:
    # ... other config
    script_attributes:
        defer: true
        # Enable Turbo Drive tracking
        'data-turbo-track': 'reload'
    link_attributes:
        # Enable Turbo Drive tracking for CSS
        'data-turbo-track': 'reload'
		

2. Enable Webpack Encore in your templates, in layout/master.html.twig, uncomment these lines:

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
    
    
    
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
    
    
    
{% endblock %}

3. Create a Stimulus controller to handle KT initialization

	// assets/controllers/kt_init_controller.js
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    connect() {
        this.initializeKT();
    }
    
    initializeKT() {
        if (window.KTComponents && typeof window.KTComponents.init === 'function') {
            window.KTComponents.init();
        }
        
        // Re-initialize specific components that might be needed
        if (window.KTApp && typeof window.KTApp.init === 'function') {
            window.KTApp.init();
        }
    }
}

4. Add Turbo-specific code in your app.js

	import './styles/app.css';

	// Start the Stimulus application
	import './bootstrap';
	
	// Import and register Turbo
	import { Turbo } from '@hotwired/turbo';
	
	// Listen for Turbo events to re-initialize theme
	document.addEventListener('turbo:load', () => {
		// Re-initialize theme components after Turbo navigation
		if (window.KTComponents && typeof window.KTComponents.init === 'function') {
			window.KTComponents.init();
		}
	});
	
	// Prevent double initialization issues
	document.addEventListener('turbo:before-render', () => {
		// Clean up any event listeners or theme elements that need to be reset
		// before the new page is rendered
	});

5. Apply the controller to your layout

Metronic has custom page loaders that might conflict with Turbo. You may need to modify how they work:

	// Adjust to work with Turbo
document.addEventListener('turbo:before-visit', () => {
    if (window.KTApp && typeof window.KTApp.showPageLoading === 'function') {
        window.KTApp.showPageLoading();
    }
});

document.addEventListener('turbo:render', () => {
    if (window.KTApp && typeof window.KTApp.hidePageLoading === 'function') {
        window.KTApp.hidePageLoading();
    }
});

More info: Hotwired Turbo Handbook Symfony UX Turbo Integrating Turbo with existing JavaScript

Hi,

Are you referring to Metronic 9 Tailwind or Metronic 8 Bootstrap ?

Regards,
Sean