Symfony + Stimulus + Turbo
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
Replies (3)
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 <body> 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") }}
<!-- Keep the rest of your theme styles -->
<!-- ... -->
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags("app") }}
<!-- Keep the rest of your theme scripts -->
<!-- ... -->
{% 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
<body
{{ theme.printHtmlClasses("body") }}
{{ theme.printHtmlAttributes("body") | raw }}
data-controller="kt-init">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](https://turbo.hotwired.dev/handbook/introduction)
[Symfony UX Turbo](https://symfony.com/bundles/ux-turbo/current/index.html)
[Integrating Turbo with existing JavaScript](https://turbo.hotwired.dev/handbook/building#integrating-with-script-elements)
Hi,
Are you referring to Metronic 9 Tailwind or Metronic 8 Bootstrap ?
Regards,
Sean
Hello
I am referring to Metronic 8 Bootstrap version.
Regards,
Tania
