How to install and configure mixitup library in Nuxt 3?

Question

Would you like to know how to use the mixitup package in Nuxt 3? I downloaded it via npm, created a file inside the plugins folder with the name mixitup.js but I couldn't make it work.

// mixitup.js

import mixitup from 'mixitup';

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

In a component

// 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>

This is a error message in console

[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)

Answer 1

According to a response from a group on Telegram I did the following:

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

<script setup>
onMounted(async () => {
    const mixitup = await import('mixitup')

    setTimeout(() => {
        mixitup.default('.mixitup-gallery', {
            selectors: {
                target: '.mix'
            },
            animation: {
                duration: 400,
                nudge: true,
                reverseOut: true,
                effects: 'fade translateY(-100%)'
            }
        });
    }, 1000);
})

The setTimeout function is used so that the Mixitup library only interacts with the DOM when the lifecycle is complete. That is, when the component is mounted. This step is necessary because the mixtiup library only works on the client side.

And on the page where this component is called, I wrap it between the tags:

<client-only>
     <Gallery />
</client-only>

See the documentation: https://nuxtjs.ir/api/components-client-only

Another important point is that I deleted the mixitup.js file from inside the plugins directory.