├── README.md
├── vuecode.js
└── wp-vue-tutorial.php


/README.md:
--------------------------------------------------------------------------------
 1 | # wp-vue-tutorial
 2 | This is the code for a tutorial on how to use Vue.js in WordPress.
 3 | The tutorial can be found at: https://dev.to/workingwebsites/using-vue-in-wordpress-1b9l
 4 | 
 5 | TLDR; 
 6 | 1. Create a plugin in WordPress to use the code
 7 | 2. Create a shortcode in the plugin
 8 | 3. Create your Vue code
 9 | 4. Load Vue, then your code file.
10 | 5. Make sure your .js file is loaded after the dom is drawn.
11 | 
12 | You're done!
13 | 


--------------------------------------------------------------------------------
/vuecode.js:
--------------------------------------------------------------------------------
1 | var app = new Vue({
2 |   el: '#divWpVue',
3 |   data: {
4 |     message: 'Hello Vue!'
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/wp-vue-tutorial.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Plugin Name: WordPress Vue Tutorial
 4 |  * Description: A demo on how to use Vue in WordPress.
 5 |  */
 6 | 
 7 | //Register scripts to use
 8 | function func_load_vuescripts() {
 9 | 	wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
10 | 	wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );
11 | }
12 | //Tell WordPress to register the scripts
13 | add_action('wp_enqueue_scripts', 'func_load_vuescripts');
14 | 
15 | 
16 | //Return string for shortcode
17 | function func_wp_vue(){
18 |   //Add Vue.js
19 |   wp_enqueue_script('wpvue_vuejs');
20 |   //Add my code to it
21 |   wp_enqueue_script('my_vuecode');
22 | 
23 |   //Build String
24 |   $str= "<div id='divWpVue'>"
25 |   	."Message from Vue: {{ message }}"
26 |   	."</div>";
27 | 
28 |   //Return to display
29 |   return $str;
30 | } // end function
31 | 
32 | //Add shortcode to WordPress
33 | add_shortcode( 'wpvue', 'func_wp_vue' );
34 | ?>
35 | 


--------------------------------------------------------------------------------