VueJs in WordPress

How to embed a Vue instance in your WordPress Pages

Just because you’re managing a WordPress site, doesn’t mean you can’t take advantage of the awesome VueJs library. To get the most out of the library, you typically want to use some kind of build tool. However, sprinkling some interactivity in your front end is relatively easy.

Let’s take a look at how we can embed a Vue component into one of our WordPress pages.

Setup

Setting up a WordPress application is relatively easy now a days. There are tons of hosting companies that offer one click WordPress installs with easy hosting setup. The install is outside the scope of this article. However, once installed and running, its incredibly easy to add dynamic Vue components to any Gutenberg Block.

The Component

Once you’re ready, create your Custom HTML Gutenberg block.

Here is the script. This example is copied from the VueJs official docs. We’ll then go over the code.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue-WordPress!'
  },
  mounted(){
    console.log("Loaded the vue");
  }
})
</script>

Code Review

We first need to import our Vue library using the CDN script. We then have our markup which simply interpolates and displays the data in the message property. Finally our script section where we instantiate our Vue instance. In that instance, we set the data property method, and it’s message property. We also call a console log when the component is mounted. Pretty simple.

Save or preview your WordPress page and you should see the message “Hello Vue-WordPress!” displayed on the page.


It’s as simple as that. Let’s add a bit more functionality by making an HTTP request from our Vue Instance.

The Component-Revisited

We’ve now imported the Axios request library as well. Let’s look at some of the additions to our code.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <p v-for="user in users">{{ user.name }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    users: []
  },
  methods: {
    makeApiRequest: function () {
      console.log("called makeApiRequest");
      axios.get('http://jsonplaceholder.typicode.com/users').then((response) => {
      this.users = response.data
    })
    .catch((e) => {
      console.error(e)
    })
    }
  },
  mounted(){
    console.log("Loaded the vue");
    this.makeApiRequest();
  }
})
</script>

Re-Review

Let’s start by looking at the script section. We’ve replaced the message property and replaced it with the users property, which we instantiate as an empty array

data: {
    users: []
  },

We then add the methods property to the Vue instance. and create a method called makeApiRequest which is responsible for using the Axios library to make the GET request to the remote API. In this case, we are using the JSON place holder API available here.

methods: {
    makeApiRequest: function () {
      console.log("called makeApiRequest");
      axios.get('http://jsonplaceholder.typicode.com/users').then((response) => {
      this.users = response.data
    })
    .catch((e) => {
      console.error(e)
    })
    }
  },

Notice we are using arrow functions, which is gaining adoption in most modern browsers. The response data is assigned to the users property. We make sure to catch and deal with any errors. Finally, we can look at the markup, where we use the v-for directive to loop over the contents of the users array.

<div id="app">
  <p v-for="user in users">{{ user.name }}</p>
</div>

Closing

That is all we need in order to implement some VueJs goodness into our WordPress pages and posts.

Of course, since we dont have the functionality that a build tool offers us, we have to limit our use of VueJs to small to medium micro applications. However, as long as one can manage the code effectively, there is no limit to what they can do.


Check back soon for new updates and recipes.

If you found this helpful, or just want to help us out, feel free to donate as little or as much as you’d like. Every little bit goes towards helping caffeine addicts in need.

Leave a Reply

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