Introduction to VueJS & The WordPress REST API

@TwitterHandle [change in Slide > Edit Master]
Introduction To VueJS & The
WordPress REST API
Josh Pollock | CalderaLabs.org

@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

@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

@Josh412
CalderaLearn.com
0.
Josh + VueJS
Didn’t You Talk About Angular Last Year?

@Josh412
React and NG2 Are More Than I Need

@Josh412
VueJS Is A Good Balance

@Josh412
CalderaLabs.org
BONUS LINK #1
calderalearn.com/wcmia-js-frameworks

@Josh412
CalderaLearn.com
1.
Why VueJS Is Really Cool
Simple, Reactive, Lightweight

@Josh412
VueJS: Simplicity
Fast Start
Works with ES5
Better with ES6
Reusable Components
Familiar Syntax
HTML(ish) Templates
18kB

@Josh412
Reactive Seems Familiar
VueJS Lifecycle Diagram
vuejs.org/images/lifecycle.png

@Josh412
We’re Used To
Event-Based Systems

@Josh412
Event-Based Systems
Like WordPress Hooks

@Josh412
VueJS Doesn’t Include But Has Official Packages
HTTP
Router
Flux/ Redux State Manager

@Josh412
CalderaLearn.com
2.
VueJS + WordPress Basics
Enough To Get Started

@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

@Josh412
CalderaLabs.org
Example One
calderalearn.com/wcmia-example-1

@Josh412
Vue Templates
<div id="post">
<article>
<header>
<h1 class="post-title">
{{post.title.rendered}}
</h1>
</header>
<div class="entry-content">
{{post.content.rendered}}
</div>
</article>
</div>

@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",
}
}
}
});

@Josh412
CalderaLabs.org
Example Two

@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
}
});
});

@Josh412
Vue Templates
<div id="post">
<article>
<header>
</h1>
</header>
<div class="entry-content" v-html="post.content.rendered"></div>
</article>
</div>

@Josh412
CalderaLabs.org
Example Three

@Josh412
Vue Templates
<div id="post">
<form v-on:submit.prevent="save">
<div>
<label for="post-title-edit">
Post Title
</label>
<input id="post-title-edit" v-model="post.title.rendered">
</div>
<div>
<label for="post-content-edit">
Post Content
</label>
<textarea id="post-content-edit" v-model="post.content.rendered"></textarea>
</div>
<input type="submit" value="save">
</form>
<article>
<header>
</h1>
</header>
<div class="entry-content" v-html="post.content.rendered"></div>
</article>
</div>

@Josh412
Event Handling
https://vuejs.org/v2/guide/events.html

@Josh412
The Vue Instance
var ex3;
jQuery.ajax({
url: config.api,
success: function(r) {
ex3 = new Vue({
el: '#post',
data: {
post: r
},
methods: {
save: function(){
var self = this;
$.ajax( {
url: config.api,
method: 'POST',
beforeSend: function ( xhr ) {
xhr.setRequestHeader( 'X-WP-Nonce', config.nonce );
},
data:{
title : self.post.title.rendered,
content: self.post.content.rendered
}
} ).done( function ( response ) {
console.log( response );
} );
}
}
});
}
});

@Josh412
CalderaLabs.org
Example Four

@Josh412
Components
Let’s Make Our Code More Reusable!

@Josh412
App HTML
<div id="app">
<post-list></post-list>
</div>

@Josh412
Templates
We Could Have Used A Template Before

@Josh412
Template HTML
<script type="text/html" id="post-list-tmpl">
<div id="posts">
<div v-for="post in posts">
<article v-bind:id="'post-' + post.id">
<header>
</h2>
</header>
<div class="entry-content" v-html="post.excerpt.rendered"></div>
</article>
</div>
</div>
</script>

@Josh412
Instantiating
Components

@Josh412
Vue Instance
(function($){
var vue;
$.when( $.get( config.api.posts ) ).then( function( d ){
Vue.component('post-list', {
template: '#post-list-tmpl',
data: function () {
return {
posts: d
}
},
});
vue = new Vue({
el: '#app',
data: { }
});
});
})( jQuery );

@Josh412
Components
Improve code reuse.
Can be shared between vue instances.
The Vue Router can switch components based
on state.

@Josh412
CalderaLearn.com
3.
Downsides To VueJS
It’s Cool But...

@Josh412
VueJS Downsides
Super minimal
Small, but you’re going to need other things
Less popular
Less tutorials
Less developers
Less Packages
Never going to be in WordPress core

@Josh412
CalderaLabs.org
Slides, Links & More:
CalderaLearn.com/wcmia

CalderaLabs.org
Thanks!
JoshPress.net
CalderaLearn.com
CalderaForms.com
CalderaLabs.org
@Josh412
Slides, Links & More:
CalderaLearn.com/wcmia

Introduction to VueJS & The WordPress REST API

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Introduction to VueJS & The WordPress REST API

Similar to Introduction to VueJS & The WordPress REST API (20)

More from Caldera Labs

More from Caldera Labs (17)

Recently uploaded

Recently uploaded (20)

Introduction to VueJS & The WordPress REST API