Does anyone have any insight into how to use this with vue/nuxt?

[adrianocr]

I tried to import it as a nuxt plugin but that doesn't work, it keeps shooting up "element is not defined" errors.

[Cryde]

I simply import it. Then in mounted I attach the instance :

      this.macy = Macy({
        container: this.$refs['image-container'],
        trueOrder: false,
        waitForImages: true,
        margin: 14,
        columns: 3,
        breakAt: {
          1200: 4,
          940: 3,
          520: 2,
          400: 1
        }
      });

[CHEWX]

@Cryde A little ambiguous, import what? import Macy from 'macy'?

Are you doing the init under mounted() {}

[Cryde]

import Macy from "macy"; yes

I've init it under created() {}

[leonwisdom]

@adrianocr and @Cryde how did you manage to solve this? I have a seperate Vue 3 project that uses it and works like a charm.

I'm currently using macy with nuxt 3 and getting "Element is not defined". I have imported macy, using: import Macy from "macy"; and in my onMounted: onMounted(() => { macyInstance.value = Macy({ container: '#masonry-grid', }) });

I have removed all traces of macy and just left the import and the issues seems to be with the import itself. Any help would be appreciated.

[leonwisdom]

I managed to fix it this morning, after sleeping on it. All is working as expected now. The fix was pretty simple, i just needed to create a plugin and provide the Macy instance.

plugins/macy.client.js:

import Macy from 'macy';

const plugin = defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.provide('macy', Macy);
});

export default plugin;

After that i could use it in my component using: const macy = inject('macy');

And then in my onMounted hook:

macyInstance.value = macy({
      container: '#masonry-grid',
      waitForImages: true,
      margin: 15,
      columns: 4,
      breakAt: {
          1400: 4,
          1200: 3,
          992: 2,
          768: 2,
          576: 1,
     },
})

I hope this helps anyone else that has the same issue and if you need any questions, reach out to me.