Vue Application as a Wordpress Plugin
Tags: wordpress, vue, atomic, javascript
Published: 2019-11-27 07:51:02

![Vue and Wordpress](http://michaelsoriano.com/wp-content/uploads/2018/01/wp-vue.jpg)

#### Intro
I read [this article](https://dev.to/workingwebsites/using-vue-in-wordpress-1b9l) 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](https://dev.to/workingwebsites/using-vue-in-wordpress-1b9l). 
##### The shorthand-version
1. We create a file wp-vue.php in /wp-content/plugin/wp-vue/
2. 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' );
?>
```

3. one very important change is the id attribute of the div element. For the connection to our Vue-App
5. 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
6. 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](https://dev.to/jonyhayama/comment/1bnna)

#### 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.