Vue Application as a Wordpress Plugin

DGMANN — Wed, 27 Nov 2019 07:51:02 +0000

Intro

I read this article of Lisa Armstrong to use VueJS to create a plugin for Wordpress. My post will extend Lisa's way and show a solution with a little bit more VueJS.
This is just a really short and quick article. I will write more about this next time.

Step 1

First we have to create a Vue application with vue create wp-vue. Select the default configuration and run npm run build.

Step 2

Now we can follow the steps of Lisas' article.

The shorthand-version

We create a file wp-vue.php in /wp-content/plugin/wp-vue/
with the following code:

<?php
 /**
 * Plugin Name: WordPress Vue
 * Description: Vue-App in WordPress.
 */

 function func_load_vuescripts() {
     wp_register_script('wpvue_vuejs', plugin_dir_url( __FILE__ ).'dist/js/app.c8d5a15f.js', true);
     wp_register_script('wpvue_vuejs1', plugin_dir_url( __FILE__ ).'dist/js/chunk-vendors.5e0c61d5.js', true);
 }

 add_action('wp_enqueue_scripts', 'func_load_vuescripts');

 //Add shortscode
 function func_wp_vue(){
     wp_enqueue_script('wpvue_vuejs');
     wp_enqueue_script('wpvue_vuejs1');

     $str= "<div id='app'>"
           ."Message from Vue: "
           ."</div>";
     return $str;
 } // end function

  add_shortcode( 'wpvue', 'func_wp_vue' );
?>

one very important change is the id attribute of the div element. For the connection to our Vue-App
a second important change is that we won't load the VueJS-Script with CDN. We load the chunk-vendors.js and the app.js from our Vue-App
now we have to activate the plugIn in Wordpress

Step 3

To get the js files we have to upload the dist folder which we created in Step 1 to the plugin folder wp-vue

Step 4

If you already added the shortcode [wpvue] in one of your pages the whole Vue-App shows up. We only have to reduce the code in HelloWorld.vue a little bit:

<template>
      <div class="hello">

      </div>
    </template>

    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      }
    }
    </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>

...and run the npm run build task again. After that we can upload the necessary files and delete the old ones. We also have to change the scripts in our wp-vue.php. Now we get a perfect start for a new Vue-App plugin.
The hash behind app. and chunk-vendors.should be delete to avoid editing the wp-vue.php script. We can solve this by adding a file vue.config.js next to our package.json with the following code:

module.exports = {
  filenameHashing: false,
}

We just have to remove the hashs out of our wp-vue.php and it will work. But you have to be careful with that because the caching should be handled at any point. Look at Jony's suggestion

Development

To develope in the development mode (so that we are able to use all advantages of VueJS) we can run npm run serve and create a local Vue-App to show our plugin.
A huge advantage of this way is that we also can realize an atomic design workflow and are also able to scale this up by using the Vue-App for more than one plugin.

Forem: DGMANN