Slides from Josh Pollock's WordCamp Miami 2017 talk. This is a basic introduction to using VueJS with the WordPress REST API.
For live code examples and more: https://learn.calderalabs.org/josh-wordcamp-miami-vuejs
1. @TwitterHandle [change in Slide > Edit Master]
Introduction To VueJS & The
WordPress REST API
Josh Pollock | CalderaLabs.org
2. @Josh412
CalderaLabs.org
Hi I'm Josh
Founder/ Lead Developer/ Space Astronaut Grade 3:
Caldera Labs
I make WordPress plugins @calderaforms
I teach about WordPress @calderalearn
I wrote a book about the WordPress REST API
I wrote a book about PHP object oriented programing.
I am core contributor to WordPress
I am a member of The WPCrowd @thewpcrowd
3. @Josh412
What We're Covering Today
A little background on Josh + JavaScript
Frameworks
Why VueJS Is Really Cool
Some Basics On VueJS
Some Things That Are Not So Cool About VueJS
How To Go Further With VueJS
19. @Josh412
A Few Notes Before We Look At Code
All of this is ES5
You should use ES6
We’re using jQuery.ajax()
Read the docs for install
Just need one CDN link
22. @Josh412
The Vue Instance
var ex1 = new Vue({
el: '#post',
data: {
post: {
title: {
rendered: 'Hello World!'
},
content: {
rendered: "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start
writing!</p>n",
}
}
}
});
25. @Josh412
The Vue Instance
/** You should use wp_localize_script() to provide this data dynamically */
var config = {
api: 'https://calderaforms.com/wp-json/wp/v2/posts/45218',
};
/** GET post and then construct Vue instance with it **/
var ex2;
$.get({
url: config.api
}).success( function(r) {
ex2 = new Vue({
el: '#post',
data: {
post: r
}
});
});