Symfony + Stimulus + Turbo

Question

Hello

I'm testing the Symfony theme version, and I would like to ask if it is possible to use Turbo with it. If so, could you send me documentation or feedback about the kt-app JavaScript conflict?.

When I installed Turbo, after the first page reload, the kt-app JavaScript stopped working.

Thank you in advance for reply.

Best regards,

Tania

Faizal · Answer

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: 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'

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 %}

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();
        }
    }
}

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
	});

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

Sean · Answer

Hi,

Are you referring to Metronic 9 Tailwind or Metronic 8 Bootstrap ?

Regards,
Sean

Symfony + Stimulus + Turbo

Replies (3)

Metronic

ReUI

Products

Legal

Stay Connected