如何在Laravel Vite中结合Volt实现GlideJS正常运行？

问题根源 #

DOMContentLoaded事件仅在首次页面加载时触发，而Volt的热加载是动态替换页面DOM内容，不会重新触发该事件，导致新页面中的.related-posts元素无法被GlideJS初始化。

解决方案 #

方案1：全局监听页面切换事件（适合多页面共用Glide） #

将Glide初始化逻辑封装为可复用函数，同时监听初始加载和Volt/Turbo的页面切换事件：

import 'bootstrap';
import Glide, { Autoplay, Controls } from '@glidejs/glide/dist/glide.modular.esm';

// 封装Glide初始化函数，避免重复实例化
function initGlide() {
    const glideElement = document.querySelector('.related-posts');
    if (glideElement && !glideElement._glide) {
        const relatedPosts = new Glide(glideElement, {
            type: 'carousel',
            autoplay: 2000,
            hoverpause: false,
            perView: 1,
            peek: {
                before: 100,
                after: 50
            }
        });

        relatedPosts.mount({Autoplay, Controls});
        // 标记元素已初始化，防止重复创建实例
        glideElement._glide = relatedPosts;
    }
}

// 初始页面加载时执行
document.addEventListener('DOMContentLoaded', initGlide);

// 监听Volt/Turbo页面切换完成事件
document.addEventListener('page:load', initGlide);
document.addEventListener('turbo:render', initGlide);

方案2：利用Volt组件生命周期钩子（组件级精准控制） #

如果Glide仅在特定Volt组件中使用，直接在组件的mounted钩子中初始化，destroyed钩子中清理资源：

// 示例：在你的Volt组件脚本中
<script type="module">
    import Glide, { Autoplay, Controls } from '@glidejs/glide/dist/glide.modular.esm';

    export default {
        mounted() {
            const glideElement = this.$el.querySelector('.related-posts');
            if (glideElement) {
                const relatedPosts = new Glide(glideElement, {
                    type: 'carousel',
                    autoplay: 2000,
                    hoverpause: false,
                    perView: 1,
                    peek: {
                        before: 100,
                        after: 50
                    }
                });
                relatedPosts.mount({Autoplay, Controls});
                // 存储实例到元素，方便销毁时调用
                glideElement._glide = relatedPosts;
            }
        },
        destroyed() {
            const glideElement = this.$el.querySelector('.related-posts');
            if (glideElement && glideElement._glide) {
                glideElement._glide.destroy();
                delete glideElement._glide;
            }
        }
    }
</script>

说明 #

• 方案1适合全局多处使用Glide的场景，确保所有页面切换后都能初始化；
• 方案2更贴合Volt组件化开发，资源清理更彻底，避免内存泄漏；
• 两种方案都加入了重复初始化判断，防止多次创建Glide实例导致的冲突问题。

内容的提问来源于stack exchange，提问作者Hilmi