如何在 Nuxt 3 中安装和配置 mixitup 库？

Question

想知道如何使用 Nuxt 3 中的 mixitup 包吗？ 我通过 npm 下载它，在插件文件夹中创建了一个名为 mixitup.js 的文件，但我无法让它工作。

// mixitup.js

import Mixitup from 'mixitup';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.mixitup = Mixitup;
});

在组件中

// Gallery.vue - @/components/Gallery.vue

<script>
export default {
    props: {
        items: {
            type: Array,
            required: true
        }
    },
    mounted() {
        mixitup('.mixitup-gallery', {
            selectors: {
                target: '.mix'
            },
            animation: {
                duration: 400,
                nudge: true,
                reverseOut: true,
                effects: 'fade translateY(-100%)'
            }
        });

        const controls = document.querySelectorAll('.gallery-controls button');

        controls.forEach(control => {
            control.addEventListener('click', () => {
                controls.forEach(c => c.classList.remove('active'));
                control.classList.add('active');
            });
        });
    }
}
</script>

这是控制台中的错误消息

[nuxt] [request error] [unhandled] [500] window is not defined                                                                                                                                           22:13:37
  at Object.<anonymous> (C:\Projetos\meu-projeto\node_modules\mixitup\dist\mixitup.js:10682:4)
  at Module._compile (node:internal/modules/cjs/loader:1126:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
  at Module.load (node:internal/modules/cjs/loader:1004:32)
  at Function.Module._load (node:internal/modules/cjs/loader:839:12)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
  at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async Promise.all (index 0)