Uploaded byTejaswini Deshpande
Single Page Web Applications with WordPress REST API
Tejaswini, a WordPress developer, discusses creating single page applications (SPAs) using the WordPress REST API with Vue.js, highlighting its simplicity, community support, and performance. The presentation covers setting up a development environment, implementing custom routes and authentication, and using Axios for data fetching. Additionally, it includes links to a starter project and resources for further learning.
More Related Content
Similar to Single Page Web Applications with WordPress REST API
Single Page Web Applications with WordPress REST API
- 1. Single Page WebApplications with WordPress REST API WordPress + Javascript = A Marvelous Affair
- 2. Hello, I am Tejaswini -WordPress Developer - Co-founder at Staenz Academy - Partner at Sisme.in Get in touch: tejaswinideshpande.com
- 3.
- 4.
- 6.
- 7. Access data fromWordPress
- 8.
- 11. Vue.js ● Easy tolearn even if you don’t have experience with other libraries. ● Well documented. ● Strong community involvement and lots of auxiliary projects. ● Small file size. ● Fast & Reactive
- 12. Flow / Architecture CreateHTML Layout using Vue Components and UI components like Buefy Add Routes - Login, Drafts, Pending & Scheduled Authenticate on login using JWT, use this token for each request to WP REST API Use HTTP Client like AXIOS to GET or POST data to REST API Add custom REST routes and endpoints to access Drafts etc.
- 13. Development Environment 1. InstallNode on your computer if you don’t have it already. https://nodejs.org/en/download/ 2. Install the Vue CLI 3. Install Vue Router, Axios and optionally Buefy 4. On your WordPress, install plugins a. JWT Authentication for WP REST API b. REST API endpoints for Posts by Status 5. The starter project for this talk is available at https://github.com/tejaswinideshpande/wpVueContentManager
- 14. $ vue initwebpack my-project
- 15. Basic Architecture ofa Vue App ● The index.html file loads first. ● Inside it, a special div loads up the app. ● The root of the app, is a file called App.vue. All of the components inside the app begin in this file. ● Each component can have a template as well as functionality. The template is placed at the top of the component file and the functionality in the script section below that. ● The components are loaded into the App.vue file via a special tag called the <router-view>
- 16.
- 17. Routes - Howare they added? routes: [ { path: '/', name: 'Login', component: Login, props: true }, { path: '/drafts', name: 'Drafts', component: Drafts, props: true }, …………....
- 18. Get and SendData to WordPress
- 19. REST API toget Posts http://demo.wp-api.org/wp-json/wp/v2/posts But this does not give access to Drafts or Scheduled Posts!
- 20. Register our ownCustom Routes http://demo.wp-api.org/wp-json/wppbs/v2/draft I have added Custom Endpoints for this talk in the plugin https://github.com/tejaswinideshpande/wp-rest-api-post-by-status
- 21. So, how doesa Axios GET Request look? axios.get('http://demo.wp-api.org/wp-json/wppbs/v2/draft')', { headers: { "Authorization": 'Bearer ' + token } }) .then(function (response) { response.data.forEach(function(post){ //save the data to local variable or localstorage // }); }) .catch(function (error) { console.log(error); });
- 22. Checkout the starterSPA (https://github.com/tejaswinideshpande/wpVueContentManager) 1. Copy the wpVueContentManager folder on your local drive 2. Change the ‘baseURL’ in src/environment.js 3. Change the WPAdmin constant url in src/admin.js 4. Go to command line 5. cd wpVueContentManager 6. npm install 7. npm run dev
- 23. Ready to createsomething awesome TODAY? ● Add offline functionality by saving data to localstorage ● Run periodic background syncs ● Add push notifications when any post from Draft goes to Pending and so on...
- 24. Thanks! Get in touch: Twitter:@tejaswiniD Facebook: facebook.com/tejaswinide shpande Website: tejaswinideshpande.com
- 25.