Search code examples
vue.jsnpmmasonry

How install masonry-layout on VUE component

I just installed the masonry-layout by npm but I'm not able to load it in my component.

import  "masonry-layout";

  export default {
    name: "playerSkillComponent",

    props: ['player'],

    mounted: function () {

        // initialization of masonry

        var grid = document.querySelector('.masonry-grid');
        var msnry = new Masonry( grid, {
            // options...
            columnWidth: '.masonry-grid-sizer',
            itemSelector: '.masonry-grid-item',
            percentPosition: true
        });
     }
 }

this is the error I got:

[Vue warn]: Error in mounted hook: "ReferenceError: Masonry is not defined"

Solution

  • Just update the first line (there was a type):

    import Masonry from "masonry-layout";