Using Masonry with Vue for WordPress

Problem

Following up on this post, Creating an infinite scroll with Vue for WordPress, you might want to use Masonry with Vue. The problem is you can't use Masonry directly with Vue. There is npm package you can use to overcome the problem - vue-masonry.

However, there is problem running with vue-masonry in my workflow:

events.js:183
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

I get this whenever I want to compile it with the rest of all my ES6 JS code.

Solution

So, the solution is to copy the entire JS code in vue-masonry into my local JS code by creating a new file - /modules/grid/index.js and pasting the code in there. It is not a long code so I think it is fine.

Then in my main JS file - app.js, I just import that local module in:

import {VueMasonryPlugin} from './modules/grid/index'
Vue.use(VueMasonryPlugin)

You don't have to do anything further after that. All you have to do now is adding vue-masonry directive in your Vue template.

Vue

Below is what I have in the PHP file in my WordPress custom theme for rendering the data from the WordPress API:

<template v-if="items">

    <!-- row collection -->
    <div class="row row-card">
        <div class="grid-container">
            <div class="grid-x grid-padding-x" v-masonry transition-duration="0.3s" item-selector=".item" :origin-top="true" :horizontal-order="false">

                <!-- vue - loop -->
                <!-- https://laracasts.com/discuss/channels/vue/use-v-for-without-wrapping-element -->
                <template v-for="item in items">

                    <!-- cell -->
                    <div v-masonry-tile class="large-3 medium-4 small-6 cell cell-card item">

                        <!-- container card -->
                        <div class="container-card" data-aos="fade-up">

                            <!-- card -->
                            <div class="card card-collection">
                                <div class="card-image scale-fade">

                                    <?php get_template_part( 'template-parts/page/vue', 'item' ); ?>

                                </div>
                            </div>
                            <!-- card -->

                        </div>
                        <!-- container card -->

                    </div>
                    <!-- cell -->

                </template>
                <!-- vue - loop -->

            </div>
        </div>
    </div>
    <!-- row collection -->

    <div class="container-spinner">
        <div v-if="loading === true" class="sk-circle">
          <div class="sk-circle1 sk-child"></div>
          <div class="sk-circle2 sk-child"></div>
          <div class="sk-circle3 sk-child"></div>
          <div class="sk-circle4 sk-child"></div>
          <div class="sk-circle5 sk-child"></div>
          <div class="sk-circle6 sk-child"></div>
          <div class="sk-circle7 sk-child"></div>
          <div class="sk-circle8 sk-child"></div>
          <div class="sk-circle9 sk-child"></div>
          <div class="sk-circle10 sk-child"></div>
          <div class="sk-circle11 sk-child"></div>
          <div class="sk-circle12 sk-child"></div>
       </div>
    </div>

</template>

What you need to pay attention to is adding v-masonry transition-duration="0.3s" item-selector=".item" :origin-top="true" :horizontal-order="false" to the top level of your HTML element and adding v-masonry-tile to the element that you want to loop.

Also, don't forget to add item class to the element that you want to loop:

class="large-3 medium-4 small-6 cell cell-card item"

We should get this layout on the browser screen:

Conclusion

You can download the entire source code above here, install it and run it from your local machine and see how it works.

Hope this example is helpful enough if you ever want to add Masonry to your Vue template and bumping into the same problem. Let me know what you think. Any suggestions and insights, please leave a comment below.