Closed adrianocr closed 3 years ago
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
}
});
@Cryde A little ambiguous, import what? import Macy from 'macy'
?
Are you doing the init under mounted() {}
import Macy from "macy";
yes
I've init it under created() {}
@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.
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.
I tried to import it as a nuxt plugin but that doesn't work, it keeps shooting up "element is not defined" errors.