@TwitterHandle [change in Slide > Edit Master]

Introduction To VueJS & The WordPress REST API

Josh Pollock | CalderaLabs.org

@Josh412

CalderaLabs.org

Hi I'm JoshFounder/ Lead Developer/ Space Astronaut Grade 3:

Caldera LabsI make WordPress plugins @calderaformsI teach about WordPress @calderalearnI wrote a book about the WordPress REST APII wrote a book about PHP object oriented programing.I am core contributor to WordPressI am a member of The WPCrowd @thewpcrowd

@Josh412

What We're Covering Today

A little background on Josh + JavaScript FrameworksWhy VueJS Is Really CoolSome Basics On VueJSSome Things That Are Not So Cool About VueJSHow To Go Further With VueJS

@Josh412

CalderaLearn.com

0.Josh + VueJS

Didn’t You Talk About Angular Last Year?

@Josh412

CalderaLabs.org

@Josh412

NG1 Is Cool

@Josh412

React and NG2 Are More Than I Need

@Josh412

VueJS Is A Good Balance

@Josh412

CalderaLabs.org

BONUS LINK #1calderalearn.com/wcmia-js-frameworks

@Josh412

CalderaLearn.com

1.Why VueJS Is Really Cool

Simple, Reactive, Lightweight

@Josh412

VueJS: Simplicity

Fast StartWorks with ES5

Better with ES6Reusable ComponentsFamiliar SyntaxHTML(ish) Templates18kB

@Josh412

Reactive !== ReactJS

@Josh412

Reactive Seems Familiar

VueJS Lifecycle Diagram

vuejs.org/images/lifecycle.png

@Josh412

CalderaLabs.org

@Josh412

We’re Used To Event-Based Systems

@Josh412

Event-Based SystemsLike WordPress Hooks

@Josh412

VueJS Doesn’t Include But Has Official Packages

HTTPRouterFlux/ 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 ES5You should use ES6

We’re using jQuery.ajax()Read the docs for install

Just need one CDN link

@Josh412

CalderaLabs.org

Example Onecalderalearn.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 Twocalderalearn.com/wcmia-example-2

@Josh412

Adding AJAX

@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

Data Attributes

@Josh412

Vue Templates

<div id="post">

<article>

<header>

<h1 class="post-title">

{{post.title.rendered}}

</h1>

</header>

<div class="entry-content" v-html="post.content.rendered"></div>

</article>

</div>

@Josh412

CalderaLabs.org

Example Threecalderalearn.com/wcmia-example-3

@Josh412

Form Inputs

@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 class="post-title"> {{post.title.rendered}} </h1> </header> <div class="entry-content" v-html="post.content.rendered"></div> </article></div>

@Josh412

Event Handlinghttps://vuejs.org/v2/guide/events.html

@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 class="post-title"> {{post.title.rendered}} </h1> </header> <div class="entry-content" v-html="post.content.rendered"></div> </article></div>

@Josh412

Methods

@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 Fourcalderalearn.com/wcmia-example-4

@Josh412

ComponentsLet’s Make Our Code More Reusable!

@Josh412

App HTML

<div id="app"> <post-list></post-list></div>

@Josh412

TemplatesWe 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 class="post-title"> {{post.title.rendered}} </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 minimalSmall, but you’re going to need other things

Less popularLess tutorialsLess developersLess Packages

Never going to be in WordPress core

@Josh412

CalderaLabs.org

Slides, Links & More:CalderaLearn.com/wcmia

CalderaLabs.org

Thanks!

JoshPress.net

CalderaLearn.comCalderaForms.com

CalderaLabs.org@Josh412

Slides, Links & More:CalderaLearn.com/wcmia