Laravel Livewire KTStepper Not Working
I am using KTStepper on Laravel. I try on starter kit laravel livewire. I copied basig usage example KTStepper but not working correctly. kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white not shown class list.
Replies (2)
I value the role technical SEO and content optimization experts play in strengthening online presence. From my perspective, digital marketing company in Ernakulam addressing site speed, structure, and keyword alignment creates lasting results. I’ve seen how expert guidance not only improves rankings but also enhances user experience, making digital strategies more effective and sustainable.
Hi
Sorry for the delay. This is a common issue when using KTUI components with Livewire due to DOM manipulation conflicts. Here's how to fix it:
<div data-kt-stepper="true">
<div class="kt-card">
<div class="kt-card-header flex justify-between items-center gap-4 py-8">
<div data-kt-stepper-item="#stepper_1" class="active flex gap-2.5 items-center">
<div class="rounded-full size-10 flex items-center justify-center text-md font-semibold bg-primary-light text-primary kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-inverse kt-stepper-item-completed:bg-success kt-stepper-item-completed:text-green-500-inverse">
<span data-kt-stepper-number="true" class="kt-stepper-item-completed:hidden">1</span>
<span class="hidden kt-stepper-item-completed:inline">✓</span>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono kt-stepper-item-completed:text-secondary-foreground">Step 1</h4>
<span class="text-sm text-secondary-foreground kt-stepper-item-completed:text-muted-foreground">Description</span>
</div>
</div>
<!-- Repeat for other steps -->
</div>
<div class="kt-card-content py-16">
<div >
<!-- Step 1 content -->
</div>
<div class="hidden">
<!-- Step 2 content -->
</div>
<!-- More steps -->
</div>
<div class="kt-card-footer py-8 flex justify-between">
<button class="kt-btn kt-btn-outline kt-stepper-first:hidden" data-kt-stepper-back="true">Back</button>
<button class="kt-btn kt-btn-outline kt-stepper-last:hidden" data-kt-stepper-next="true">Next</button>
</div>
</div>
</div>Add Livewire Integration Script:
// In your Livewire component or main JS file
document.addEventListener("livewire:init", () => {
// Initialize KTStepper after Livewire loads
if (typeof window.KTStepper !== "undefined") {
window.KTStepper.init();
}
});
document.addEventListener("livewire:updated", () => {
// Re-initialize KTStepper after Livewire updates
const stepperElements = document.querySelectorAll("[data-kt-stepper]");
stepperElements.forEach(element => {
if (window.KTStepper) {
window.KTStepper.getInstance(element) || new window.KTStepper(element);
}
});
});
