Vue.js in WordPress Plugin Development

Last month, our team decided to transform our plugin’s setting page to reactive UI by using one of the most popular JavaScript framework, Vue.js. In this article, we will share our experience while working with Vue.js in WordPress plugin development.

Why Vue.js?

We choose Vue.js among the alternative frameworks due to the simplicity. A good example below to show off how easy we can write a Hello World app. For those who are familiar with JavaScript, this snippet should be easy to understand. Once we create an instance of Vue class, its data and the DOM are now linked and everything is reactive now. Otherwise, you can define the template, methods, and events. When your application code base becomes larger, Vue.js gives us an important concept, namely component. Just a few steps we registered a hello-vue component and can use it in HTML template.

Implementation

In this example, we will implement a plugin Setting page that helps users key in their OAuth token and save it to the database.

Create setting page

Let’s first create a custom Setting page.

Next, we will create a form including an input for OAuth token and a submit button to save data into our WordPress option.

Setup Vue.js app

In the plugin root folder, we will create an app folder and init a npm package.

mkdir app
cd app
npm init -f

After that, we need to install the npm dependencies including Vue.js framework, Webpack, and its plugins.

// Dependencies
npm i vue --save
// Dev dependencies
npm i webpack --save-dev
npm i babel-loader vue-loader vue-template-compiler --save-dev 
npm i webpack-merge --save-dev 
npm i terser-webpack-plugin --save-dev 

Configure Webpack In this section, we will create 3 files webpack.common.js, webpack.dev.js and webpack.prod.js + webpack.common.js is a shared configuration file: + webpack.dev.js contains configuration for the development environment: + webpack.prod.js contains configuration for the production environment: In addition, we will add the scripts in the package.json file to build bundle file in different environments. We can test our configuration by adding an index.js file in app/src folder.

console.log('Hello World');

Let’s try to build our application using the command:

npm run dev

If everything goes right, it will generate a gists-snippet-bundle.js file under admin/js/dist folder.

Build the form

It’s time for us to go back render_setting_ui function and add a root element for our Vue.js app.

public function render_setting_ui() {
?>
  <h3>Gists Settings</h3>
  <div id="csw-app"></div>
<?php
}

We use Vue.js single component feature to create our form. In this component, we will have a oauthToken model to store the OAuth token input data and a save method to call the settings API. We also need to edit the index.js file to create a Vue instance and render into the root element. Finally, the bundle javascript file should enqueue to Setting page by using this snippet. Here is our final result, when clicking the Save changes button, the console log will show our debug message.

Hope this article gives you an idea and starting point for developing WordPress plugin UI with Vue.js. You can check out the full source code on our Github repo.

Why Vue.js?

We choose Vue.js among the alternative frameworks due to the simplicity. A good example below to show off how easy we can write a Hello World app. For those who are familiar with JavaScript, this snippet should be easy to understand. Once we create an instance of Vue class, its data and the DOM are now linked and everything is reactive now. Otherwise, you can define the template, methods, and events. When your application code base becomes larger, Vue.js gives us an important concept, namely component. Just a few steps we registered a hello-vue component and can use it in HTML template.

Implementation

In this example, we will implement a plugin Setting page that helps users key in their OAuth token and save it to the database.

Create setting page

Let’s first create a custom Setting page.

Next, we will create a form including an input for OAuth token and a submit button to save data into our WordPress option.

Setup Vue.js app

In the plugin root folder, we will create an app folder and init a npm package.

mkdir app
cd app
npm init -f

After that, we need to install the npm dependencies including Vue.js framework, Webpack, and its plugins.

// Dependencies
npm i vue --save
// Dev dependencies
npm i webpack --save-dev
npm i babel-loader vue-loader vue-template-compiler --save-dev 
npm i webpack-merge --save-dev 
npm i terser-webpack-plugin --save-dev 

Configure Webpack In this section, we will create 3 files webpack.common.js, webpack.dev.js and webpack.prod.js + webpack.common.js is a shared configuration file: + webpack.dev.js contains configuration for the development environment: + webpack.prod.js contains configuration for the production environment: In addition, we will add the scripts in the package.json file to build bundle file in different environments. We can test our configuration by adding an index.js file in app/src folder.

console.log('Hello World');

Let’s try to build our application using the command:

npm run dev

If everything goes right, it will generate a gists-snippet-bundle.js file under admin/js/dist folder.

Build the form

It’s time for us to go back render_setting_ui function and add a root element for our Vue.js app.

public function render_setting_ui() {
?>
  <h3>Gists Settings</h3>
  <div id="csw-app"></div>
<?php
}

We use Vue.js single component feature to create our form. In this component, we will have a oauthToken model to store the OAuth token input data and a save method to call the settings API. We also need to edit the index.js file to create a Vue instance and render into the root element. Finally, the bundle javascript file should enqueue to Setting page by using this snippet. Here is our final result, when clicking the Save changes button, the console log will show our debug message.

Hope this article gives you an idea and starting point for developing WordPress plugin UI with Vue.js. You can check out the full source code on our Github repo.