Vue Wordpress Api

Posted on  by admin

I’ve covered using the WordPress REST API with AngularJS in the past for Torque because I like it and have used it quite a bit.

However, I have been using Laravel a lot lately, and the Laravel ecosystem has embraced VueJS as the front-end framework.

That encouraged me to try it out and I’ve been impressed by its simplicity.

My first real experience using VueJS was for the Caldera Forms front-end entry viewer.

I had been experimenting with new ways of handling UI and I found VueJS to be the fastest to learn and loved the results.

In this article, I’m going to show you some VueJS basics to display and edit WordPress contents via the REST API.

In this tutorial, you will learn how with less than 25 lines of JavaScript and very few new concepts to create a reactive application that shows WordPress content, with a live updating editor.

With a little more work you could make this same code render both server-side and in the browser to ensure web crawlers — like search engines — and browsers without JavaScript could properly use the site.

That’s pretty cool, right?

I’m also not going to require you to learn ES6, or any complicated build tools.

Yes, I think you should learn ES6, and those build tools. For a big, complicated application, you might consider React or Angular 2, but VueJS is well suited for those types of applications as well.

Let’s get started with a few simple examples of how to show a single post from the WordPress REST API.

Then we’re going to add an editor. This editor will illustrate how easy it is to create reactive apps and what that means.

You will see that when you type in the form fields, the HTML elements bound to the same parts of the model — in this case the post — will live update.

More importantly, the model in the app will change, allowing us to send that back to WordPress, via the REST API to save the content.

Set Up Vue

  • In the example code, I’m going to be using jQuery’s AJAX API to get and send content to WordPress.
  • You really could use any AJAX API, depending on your needs.There are other things you could use for this, but I don’t think it makes sense to teach multiple technologies at once, so let’s stick to the standard.

To get VueJS started, we create a new instance using the Vue constructor and tell it what data to use and what HTML element wraps the section of the DOM we are working with.

Let’s start with a basic example that uses mock data, formatted the same as a WordPress post.

  • The object we pass to the constructor has two indexes.
  • The first is “el” this represents the element that VueJS binds to.
  • The second is “data” this is the data that we use to render the template inside of that element.

I have pasted the title and content of WordPress’ Hello World post in the format it would be returned by the REST API.

Now in an HTML document that includes VueJS (here is a CDN link: https://unpkg.com/[email protected]/dist/vue.min.js) you can add this HTML to serve as template:.

Using AJAX To Connect VueJS To The WordPress REST API

Notice that the outermost HTML element has the id “post” and that corresponds to the value we set in the JavaScript — “#post” for “el.” Also, this mustache style templating should look familiar if you’ve ever worked with templating languages like Mustache or Handlebars or even the AngularJS framework.

This will show the post. But you will notice that the HTML tags in the post content are not rendered.

By default, VueJS doesn’t trust HTML tags, but if you’re using a trusted API, then you can use v-html directive to bind HTML to an element.

Here our HTML is rewritten so that the HTML tags in the post content are shown:. That’s the basics to show data. Now that we have content, let’s add some form inputs to edit that content.

We actually don’t need to change our JavaScript in any way yet. All we need to do is create the inputs in the HTML and use the v-model attribute to bind the HTML input to the same part of the model as the HTML elements used for display:.

The HTML for the inputs is totally standard, except v-model.

That attribute uses the same syntax, as the template, minus the mustache.

When we run this, you can edit the post in the inputs and see the display update in real time.

Again, no extra JavaScript needed. So far we’ve been showing mock data with a form that can change the display of that data. In this section, we will replace that mock data with an AJAX call to the WordPress REST API to get a real post’s data.

The next step will be to add a save button to the form.

The save button will provide a practical example of how event handling works in VueJS as well as how to add a POST request back to the WordPress REST API to save the data.

Using the same HTML, update your JavaScript to get the post and then use the jQuery success callback to use that data to construct the Vue instance:.

Now we have real data from WordPress. By waiting until jQuery AJAX is done, we avoid constructing the Vue instance without the data we need.

One of my favorite things about VueJS is event handling.

The Vue constructor accepts an argument, which we haven’t used yet, called “methods.” This argument stages an object of functions that can be called using data-attributes in our HTML.

  • The v-click attribute can be used to tell VueJS which function defined in “methods” to call when a link, button, or submit input is clicked.
  • Here is an updated template with a submit button in the form that calls the “save()” function:.

Now we will need to define that save() function and use it to POST the data back to WordPress:.

Notice that the constructor now has a “methods” index.

Inside of the methods, we can access the post using “this.post.” But inside of the jQuery.post() method, this will refer to the current jQuery instance.

That is why the first thing I do is set the variable “self” equal to “this.” That way I can use self.post.title.rendered inside of the jQuery.post() to get the post title from the current model.

If you’re like me, you’ve been watching the cool kids make really neat apps with React and other reactive frameworks, but we’re searching for a quick way, I hope this article has shown you that VueJS is the answer.

We didn’t write a ton of code, Redux, some abstraction for HTML like JSX, or use any fancy build tools, or even use ES6. Yes, you should learn those, and I would use Redux or Vue’s flux-like state manager for a serious app, but we just got started faster then you could set up webpack.

WordPress: The Plugin.

I hope you will take this opportunity to explore the possibilities of VueJS and learn more about it.

Soon, you’ll be building more complex apps with it, and using it as an excuse to learn ES6, Flux or Redux and other modern JavaScript tools.

To learn more about the REST API JavaScript frameworks, check out Caldera Learn.

Like peanut butter and jam sometimes two good things are even better together. In this tutorial I'll show you how to use Vue in a WordPress site.

The tutorial is meant for those who have coded in WordPress and Vue or is interested in either one. Knowledge in PHP, WordPress, Javascript, Vue will help.

Statistically, WordPress runs about a third of the world's websites.

If you've created something in Vue you'd like to share, WordPress is a good platform to make it available on.

You can customize your own site, or share your code on WordPress' plugin repository.

The short answer is, Vue is known for its simplicity and robustness making it a solid choice for development. If you're adding functionality to your site, it makes a good tool to get up and running with.

It's in JavaScript, so it's familiar to most developers. WordPress uses React, can I even use Vue?Of course!

Although some features in WordPress may be in React, you are not limited to it. WordPress is open source, do what makes you happy.

We'll make a short code that displays something generated in Vue.

Tutorial Overview

We'll be using a simple example because this is more about how to put Vue and WordPress together rather than what they do.

The approach is: . Create a plugin in WordPress to use the code .

Create a shortcode in the plugin. Create your Vue code. Load Vue, then your code file. Make sure your .js file is loaded after the dom is drawn.

That's basically it. Let's get into the details.

Plugins are both simple and robust, they allow you to add functionality to your site.

This plugin will be a simple 'hello world' type.

  • We'll call it 'wp-vue-tutorial', so let's begin:.
  • This is where the files will be kept, it should be the name of the plugin.
  • For this tutorial let's use: /wp-content/plugins/wp-vue-tutorial.
  • We need a 'master file', so let's make that.
  • This file called 'wp-vue-tutorial.php' so it should look like:/wp-content/plugins/wp-vue-tutorial/wp-vue-tutorial.php.
  • Yes, the plugin name, folder name and master file name are all the same so WordPress knows where to find it.

Once WordPress opens it up, it needs some more info on what this thing is. That's included in the Header.

We're keeping it simple, so in wp-vue-tutorial.php, add the following code:. More info: https://developer.wordpress.org/plugins/.

If you go to your WordPress Dashboard, you'll see your plugin.Dashboard -> PluginsIt should appear in the list.

Click Activate on your plugin. Now it's loaded, but not much happens because there's no code to run.

That Got Reactive Fast

So, let's create a shortcode. A shortcode tells WordPress to insert the content generated by your PHP code into the content of the page or post.

The user enters something like [myshortcode] and when the page is displayed, it shows 'This is content from my shortcode.'

Note: WordPress' current text editor (Gutenberg) allows you to put in blocks of content in.

A shortcode will still work with that, in fact there is a block specifically for short codes.

Getting Started With VueJS

  • We're using shortcodes in this tutorial because it's a standard that works.
  • For more info: https://codex.wordpress.org/Shortcode_API.
  • Add the following code to your plugin file (wp-vue-tutorial.php):.
  • Breaking it down:The function func_wp_vue() returns the text Hello Shortcode.
  • Your file should look like:.
  • Test it.Edit, or add a new WordPress page.
  • In the content area, type in [wpvue].Publish the page and have a look at it.
  • You should see Hello Shortcode. The short code can return more than a word, we can put in an element in the too.

Let's change the code to:. To use Vue, you need three things:.

Vue js files need to be loaded on the page so you can use the framework. You need an element on your page Vue can work in.

You need your Vue code in a .js file to do its work in the element.

Let's start with adding Vue. You can add Vue through a link to a CDN.

There's 2 versions, one for development with debugging options and one for production that is faster and leaner.We'll use the development one: https://cdn.jsdelivr.net/npm/vue/dist/vue.js.

We need to load this into WordPress, which can be done through the magic of 'wp enqueue scripts' and 'wp_register_script'.This hook automatically load the script into WordPress' head when needed.

For more info: . Register Scripts: https://developer.wordpress.org/reference/functions/wp_register_script/ .

Enque Scripts: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts .

We'll add the code to your plugin file, above the shortcode.It should look like this: . Right now, we told WordPress about Vue.js, but we haven't loaded it.

You load it in the shortcode function so it fires when the shortcode is running.

Include the following in your shortcode function:.