Vue Application on a WordPress Site as an External Plugin

It’s quite possible that you’ve encountered a situation where you wanted to place a small application written in JavaScript on your WordPress site. It might have been some kind of calculator, a mini-game, or an interactive animation. Many intermediate WordPress users will certainly attempt to attach such JavaScript code to one of the HTML elements on the page using wp_enqueue_script() in the theme’s functions.php file. This solution seems quick and fairly simple — after all, every (well… nowadays almost every :)) theme has a functions.php file. However, there is another way to do this that will give us greater flexibility in managing such an embedded JavaScript application in the future.

In the title of this post, I used the phrase “Vue Application,” and for the purpose of our example, I will show how to include an application built in Vue 3 — though it could just as well be an application created in React, Angular, or any other JavaScript framework or library.

Vue part

Let’s begin by assuming that we have access to a completed Vue source project. Opening the project directory, we will see a structure of folders and files similar to this.

>dist
>node_modules
>public
>src
index.html
package-lock.json
package.json
README.md
vite.config.js

To begin with, let’s assume that we have access to a completed Vue source project. When we open the project directory, we will see a folder and file structure roughly like this. I won’t be describing the process of creating a Vue application today; for the purposes of this post, I am assuming that the source code already exists. What we’re interested in is the /dist directory. After opening it, we should see the files that make up the production build of our application. If the directory is empty, we can generate the production files using the appropriate command:

npm run build

we generate the production build files. I assume that you have the Node.js JavaScript runtime installed and that you are using the npm package manager. If not, I recommend visiting the Node.js documentation to install these components. If everything went well, in the /dist directory of the Vue project we should see a structure of folders and files like this:

/assets
index.html

The /assets directory contains minified JavaScript and CSS files, as well as any other binary assets such as images, audio files, etc. Now all that remains is to create a WordPress plugin that will “add” this code to the site. In the wp-content/plugins directory of our WordPress installation, we create a folder whose name will reflect the name of our plugin. For this example, we create a folder named vue-app-1.

PHP part

To create a WordPress plugin, we add a file named vue-app-1.php inside this folder. It’s important that the folder and the file have the same name. In the vue-app-1.php file, we add…

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

These are the basic pieces of information required for WordPress to detect our plugin. At this point, we should already see our plugin in the WordPress admin panel. For now, it doesn’t do anything at all. So let’s add the instructions that will allow us to include our Vue application. First, we move the contents of the /dist directory of our Vue application into the directory of our WordPress plugin.One of the features provided by WordPress is the ability to add so-called shortcodes to our site. Using the Gutenberg editor or a popular page builder like Elementor, we can easily add a block with a short piece of code in the form of:

[nazwa-naszego-shortcodu]

We will also make use of this functionality in our plugin. We will create a shortcode that adds the Vue application to our WordPress installation. The functions responsible for adding JavaScript and CSS files are wp_enqueue_script() and wp_enqueue_style(), so we add the following to our plugin code:

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

function wp_my_plugin2()
{
    wp_enqueue_script('plik-js', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array(), '1.0', true);
    wp_enqueue_style('vue-style', plugin_dir_url(__FILE__) . '/assets/index-BqFQXHG0.css', array(), '1.0');
    wp_register_script('vue_wp_compiled', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array('plik-js'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'wp_my_plugin2');

Using add_action() we added the JavaScript and CSS files of our application, and we also registered our JavaScript file within the WordPress instance so that we can use it later when creating the shortcode. We then create a function that will include our registered script and return a piece of HTML to which our application will be attached.

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

function wp_my_plugin2()
{
    wp_enqueue_script('plik-js', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array(), '1.0', true);
    wp_enqueue_style('vue-style', plugin_dir_url(__FILE__) . '/assets/index-BqFQXHG0.css', array(), '1.0');
    wp_register_script('vue_wp_compiled', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array('plik-js'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'wp_my_plugin2');

function attach_vue()
{
    wp_enqueue_script('vue_wp_compiled');
    return "<div id='app'></div>";
}

Next, using WordPress’s add_shortcode() function, we add this function as a shortcode. The complete plugin should look like this:

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

function wp_my_plugin2()
{
    wp_enqueue_script('plik-js', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array(), '1.0', true);
    wp_enqueue_style('vue-style', plugin_dir_url(__FILE__) . '/assets/index-BqFQXHG0.css', array(), '1.0');
    wp_register_script('vue_wp_compiled', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array('plik-js'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'wp_my_plugin2');

function attach_vue()
{
    wp_enqueue_script('vue_wp_compiled');
    return "<div id='app'></div>";
}

add_shortcode('vue_app', 'attach_vue');