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 calderalearn.com/wcmia-example-2

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

@Josh412 CalderaLabs.org Example Three calderalearn.com/wcmia-example-3

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

@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 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 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

More Related Content

What's hot

Viewers also liked

Similar to Introduction to VueJS & The WordPress REST API

More from Caldera Labs

Recently uploaded

Introduction to VueJS & The WordPress REST API