StephenBurakoff.com How Vue is implemented in WordPress.

1. Setup

create a  plugin folder “vue” and put vue.php and vuecode.js  and another folder called “css” into the folder. they’re empty for now. vue.php runs things with WP PHP calls and creates the structure with HTML and the CSS contained in the “css” folder. Register bootstrap.min.css and your own css. Call your css “style.css” and put it into the “css” folder.

2. Edit vuecode.js – Creating the Resource Cards

vuecode.js  contains the content going into the page. There’s two content types in this example: resources – called ‘#serious_list‘ in the code, and fun called ‘#card_list’ in the code below. Each of those codes tell Vue.js an ID to deliver the payload when done processing the data in that section.

The content for the Resources‘ menu item is created in ‘#serious_list‘ is a two dimensional array, think rows, with columns. Each row contains an image address, titlebutton hrefbutton name, and a description. Fields unavailable can be just left out.

3. Edit vuecode.js – Creating the Fun Cards

The content for the Fun‘ menu item is created in ‘#card_list‘ is a two dimensional array also. Each row contains an image address, titlebutton hrefbutton name, and a description. Fields unavailable can be just left out.

4. Edit vuecode.js – Creating Headlines and Bylines

#divWpVue‘, ‘#divWpVue_2‘, ‘#resourceVue‘, and ‘#resourceVue_2‘ are each two dimensional arrays as well. Each pair are a message headline and byline (_2) together. Each row contains an image address, titlebutton hrefbutton name, and a description. Fields unavailable can be just left out.

 

5. Edit vue.php – Tell WordPress

There’s a few things to do first. 1Register Bootstrap & your style sheet (in the folder called css ).  2Enqueue Bootstrap & your style sheet (make them run). 3 – Load Vue.js,  make sure to use vue.min.js

Now create your shortcode used to include your Vue.js plugin. Here we’ve created a parameter passed to the shortcode – either ‘resources‘ or ‘fun‘.

 

 

6. Create HTML structure

 

Thank you.