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, title, button href, button 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, title, button href, button 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, title, button href, button 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. 1 – Register Bootstrap & your style sheet (in the folder called css ). 2 – Enqueue 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
