Using Vuejs with Wordpress Tutorial

One of the good problems for web developers today is that we are spoiled with the option of the frameworks available. For JavaScript framework, we use a lot of Vue.js and jQuery. jQuery should be well known so there is no need for us to tell more about it. On the other hand, Vue.js is a newcomer and is gaining a lot of adopters. Over the last two years we have been using it and we are falling in love with it. The clarity, the modular approach, the browser debugger tool and the vue-cli are just simply awesome.

There are tons of things we can share about Vue.js, but today we will focus on talking about one thing: how to bring Vue.js into Wordpress.

Before we start, let's set the objectives we want to achieve. First of all, we want to create a development environment which should work in both vue-cli and in Wordpress. Secondly, we want to make it easy to add / remove components. Lastly, we want to make change on the fly on the Wordpress.

For the development, we will be using vue-cli since it's already set up everything you need to start develop with Vue.js. The only thing we need to take care here is to set the assets like images or css path accordingly so that it works in both Vue.js and Wordpress. We will see how to do this very soon.

Let take a look at our main.js file

// make jQuery available globally
window.$ = jQuery

import './iw-global.js'
import ContentNav from "./components/ContentNavigation.vue"
import PopupModal from "./components/PopupModal.vue"

// export it to global variable so we can register the component later
window.ContentNav = ContentNav
window.PopupModal = PopupModal

You may notice that we have not initialized Vue app yet. In fact,  we will initialize it later in footer.php instead, so that we have the flexibility to make changes.

This is our iw-global.js file. Notice the window.iw.path, which we make it to either use "/static" or we override it later in footer.php

import Vue from "vue"
window.iw = {
  path: '/static',
  Vue: Vue,
}

This is how we  override global variable window.iw in footer.php.

<script src="/wp-content/themes/your-child-theme/assets/js/manifest.xxx.js" charset="utf-8"></script>
<script src="/wp-content/themes/your-child-theme/assets/js/vendor.xxx.js" charset="utf-8"></script>
<script src="/wp-content/themes/your-child-theme/assets/js/app.xxx.js" charset="utf-8"></script>
<script> window.iw.path = "/wp-content/themes/your-child-theme/assets/" </script>

<script>
/* eslint-disable no-new */
document.addEventListener("DOMContentLoaded", (event) => {
    window.iw.Vue.component('content-nav', ContentNav)
        window.iw.Vue.component('popup-modal', PopupModal)

    if (!document.getElementById('app')) return

    new window.iw.Vue({
        el: '#app',
        template: '#iw-template',
        methods: { },
        mounted: function() {}
    })
})

</script>

Below is our index.php.

<div id="app">
</div>

    <script type="text/x-template" id="iw-template">
      <div class="content" id="iw-app">
          <content-nav></content-nav>
          <popup-modal ref="mymodal">
                <h4 slot="header">different description</h4>
          </popup-modal>
      </div>
    </script>

By now you should have a working Vue.js app!

Remember our third goal is to the make the content changeable in Wordpress, that's why we use "slot" in contentWithSlot component. Vue.js have a good example of how to use the slot on this page, so we will not go through it again here.

Putting the x-template in the .php file give us the flexibility to make change to the Vue.js components. Besides changing the "slot" content, we also can remove any component (e.g. content-nav if not needed) any time.

In short, we have introduced you how to make use of the vue-cli to compile the code with Webpack 2, while extracting the critical part to Wordpress to retain the flexibility to make change than to recompile the code again.

Lastly, we have modified the above example from a working code, so there might be some silly copy-paste mistake. Comment on the comment box below if you spot any and we will update it :)

Do you use Vue.js in Wordpress before? Feel free to comment below to share your thoughts on this blog post!