WordPress Post from Front End using REST API and Vue.js

Axios

Axios is a popular HTTP client library that covers almost everything vue-resource provides with a similar API.

Install Axios

npm i axios --save-dev

To simplify using Axios in our Vue app, install the vue-axios wrapper for Vue integration.

npm i vue-axios --save-dev

Code Updates

Update src/main.js as follows.

main.js
import Vue from 'vue'

import axios from 'axios'
import VueAxios from 'vue-axios'

import App from './App.vue'

Vue.use(VueAxios, axios)

Vue.axios.defaults.headers.common['X-WP-Nonce'] = wp_api_vuejs_poc.nonce;

export default Vue;

new Vue({
  el: '#app',
  render: app => app(App)
});

Update src/App.vue as follows.

REPLACE

Vue.http.post

WITH

Vue.axios.post

Rebuild the App

npm run build

Uninstall vue-resource

npm uninstall vue-resource --save-dev

Refresh the api-test page and Submit a post to confirm the build and app are working as expected.


The axios-p01 tag in the wp-api-vuejs-poc source code repository on GitHub has been updated to use axios instead of vue-resource for ajax requests:

Source Code

jQuery

Since jQuery is loaded by default in WordPress, we can use its ajax asynchronous HTTP method for the API request.

Code Updates

Remove all of the vue-resource code in src/main.js.

main.js
import Vue from 'vue'

import App from './App.vue'

export default Vue;

new Vue({
  el: '#app',
  render: app => app(App)
});

Replace the script block code in src/App.vue as follows.

import $ from 'jquery'
import Vue from './main.js'

export default {
  data() {
      return {
          post_title: null,
          post_content: null
      }
  },
  methods: {
    onSubmit: function () {

      $.ajax({
          method: "POST",
          url: wp_api_vuejs_poc.rest_url + 'wp/v2/posts',
          data: {
            title: this.post_title,
            content: this.post_content
          },
          beforeSend: function ( xhr ) {
              xhr.setRequestHeader( 'X-WP-Nonce', wp_api_vuejs_poc.nonce );
          },
          success : function( response ) {
              console.log( response );
              alert( wp_api_vuejs_poc.success );
          },
          fail : function( response ) {
              console.log( response );
              alert( wp_api_vuejs_poc.failure );
          }
      });
    }
  },
}

The global jQuery object needs to be available to the app to use its ajax method. Add the externals option to the webpack.config.js and specify jquery so it can be declared as a dependency.

externals: {
  // require("jquery") is external and available
  // on the global var jQuery
  "jquery": "jQuery"
}

The jquery-p01 tag in the wp-api-vuejs-poc source code repository on GitHub has been updated with these changes. The vue-resource plugin is removed and replaced with the ajax method available in the external jQuery library loaded by default in WordPress:

Source Code

Part II

Part 2 of this series covers adding the following to the Vue.js front end WordPress application.

  • List posts submitted by the current user
  • Select from the list to edit a post
  • Delete a post from the list

Resources


Published by

Jim Frenette

Web Developer - views here are my own except those taken from people more clever than me.

Loading Disqus Comments ...
Loading Facebook Comments ...