Introduction to VueJS & The WordPress REST API
3 likes2,778 views
The document is a presentation by Josh Pollock on using Vue.js with the WordPress REST API, covering the benefits of Vue.js such as its simplicity and reactivity, along with practical code examples. It addresses Vue.js integration with WordPress, including setup, AJAX requests, forms, and components to enhance code reusability. Pollock also outlines some downsides of Vue.js, including its relative obscurity and lack of extensive resources compared to other frameworks.
![@TwitterHandle [change in Slide > Edit Master]
Introduction To VueJS & The
WordPress REST API
Josh Pollock | CalderaLabs.org](https://image.slidesharecdn.com/introductiontovuejsandthewordpressrestapi-170326032431/85/Introduction-to-VueJS-The-WordPress-REST-API-1-320.jpg)
Introduction to VueJS & The WordPress REST API
- 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
- 4. @Josh412 CalderaLearn.com 0. Josh + VueJS Didn’t You Talk About Angular Last Year?
- 7. @Josh412 React and NG2 Are More Than I Need
- 8. @Josh412 VueJS Is A Good Balance
- 10. @Josh412 CalderaLearn.com 1. Why VueJS Is Really Cool Simple, Reactive, Lightweight
- 11. @Josh412 VueJS: Simplicity Fast Start Works with ES5 Better with ES6 Reusable Components Familiar Syntax HTML(ish) Templates 18kB
- 13. @Josh412 Reactive Seems Familiar VueJS Lifecycle Diagram vuejs.org/images/lifecycle.png
- 15. @Josh412 We’re Used To Event-Based Systems
- 17. @Josh412 VueJS Doesn’t Include But Has Official Packages HTTP Router Flux/ Redux State Manager
- 18. @Josh412 CalderaLearn.com 2. VueJS + WordPress Basics Enough To Get Started
- 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
- 21. @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>
- 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 } }); });
- 27. @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>
- 30. @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>
- 32. @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>
- 33. @Josh412 Methods
- 34. @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 ); } ); } } }); } });
- 36. @Josh412 Components Let’s Make Our Code More Reusable!
- 38. @Josh412 Templates We Could Have Used A Template Before
- 39. @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>
- 41. @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 );
- 42. @Josh412 Components Improve code reuse. Can be shared between vue instances. The Vue Router can switch components based on state.
- 43. @Josh412 CalderaLearn.com 3. Downsides To VueJS It’s Cool But...
- 44. @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
- 45. @Josh412 CalderaLabs.org Slides, Links & More: CalderaLearn.com/wcmia
- 46. CalderaLabs.org Thanks! JoshPress.net CalderaLearn.com CalderaForms.com CalderaLabs.org @Josh412 Slides, Links & More: CalderaLearn.com/wcmia