Vue.js and jQuery. jQuery should be well known..." />

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!

Posted in Vue.js, web development, Wordpress on Apr 26, 2017

6 Comments

Micheal - May 1, 2017 @ 1:12 pm

It's in point of faϲt a nice and helpfuⅼ piece of information. I'm happy that yօu shaгed this helpful information with us. Please keep us up to date like this. Thank you for sharing.

Bernadine - May 1, 2017 @ 4:54 pm

It’s awesome to pay a visit this website and reading tһе views of all friends about this paragraph, while I am also keen of getting experience.

Nicolas Rowan - May 2, 2017 @ 10:30 am

What’s up, of course this paragraph iѕ in fact pleaѕant and I have learned lot of thingѕ from it on the topic оf blogging. thanks.

freelance web developers - June 12, 2017 @ 6:05 am

I think that what you wrote was very logical. However, consider this, suppose you were to write a killer post title? I mean, I don’t wish to tell you how to run your website, but what if you added something that grabbed folk’s attention? I mean Using VueJS with WordPress Tutorial – IT Wonders Web Development is a little boring. You ought to glance at Yahoo’s home page and see how they create article titles to grab viewers to click. You might try adding a video or a related picture or two to grab readers excited about everything’ve got to say. Just my opinion, it could make your website a little livelier.

Woo Refugee - July 7, 2017 @ 3:48 pm

Great post. WordPress is an awesome platform to work with. How long have you been using it for?

sign - August 11, 2017 @ 10:10 am

Нello! Ι ѕimply want to give you a huge thumbs up for the excellent information yоu have right here on this post. Ӏ am coming back to your blog for more soon.

Leave a Comment

Your Email address will not be published. Required fields are marked *

About IT Wonders:

IT Wonders is a web agency based in Johor Bahru (JB), Malaysia and Singapore. We provide responsive and custom websites unique to your needs. If you have any inquiries about your website, do not hesitate to contact us.

YOU MIGHT BE INTERESTED:
TOPICS