yavisht/wordpress-simple-load-more-posts-using-vue-and-wp-rest-api

WordPress Simple Load more Posts using Vue and WP Rest API

Load more posts using Vue.js and WP Rest API

We will go through a minimalist Vue component based example that will fetch posts using WordPress Rest API.

Wouldn't it be cool to use something like this in your markup?

  <posts>
    <post
      class="post"
      :id="post.id"
      :title="post.title.rendered"
      :permalink="post.link">
    </post>
  </posts>

  <button @click="getPosts(page)">Load Posts</button>

With an ability to output any markup you desire in html on compile for your styling needs. So the next time you need to make load more for your websites, your HTML markup remains the same.

Or perhaps try something like the code below for another post type.

  <movies>
    <movie
      class="movie"
      :id="movie.id"
      :title="movie.title.rendered"
      :permalink="movie.link"
      :genre="movie.genre"
      :duration="movie.duration
      :rating="movie.rating">
    </movie>
  </movies>

wordpress-simple-load-more-posts-using-vue-and-wp-rest-api's Issues

Adding Categories

Ok, stuck on this one. I have prepared the api to show the categories like below:

"cats": [
{
"term_id": 3,
"name": "Pants",
"slug": "pants",
"term_group": 0,
"term_taxonomy_id": 3,
"taxonomy": "category",
"description": "Practical tips and tricks for cleaning and wearing your clothes.",
"parent": 0,
"count": 5,
"filter": "raw",
"cat_ID": 3,
"category_count": 5,
"category_description": "Practical tips and tricks for cleaning and wearing your clothes.",
"cat_name": "Pants",
"category_nicename": "pants",
"category_parent": 0
},
{
"term_id": 6,
"name": "Ties",
"slug": "ties",
"term_group": 0,
"term_taxonomy_id": 6,
"taxonomy": "category",
"description": "",
"parent": 0,
"count": 2,
"filter": "raw",
"cat_ID": 6,
"category_count": 2,
"category_description": "",
"cat_name": "Ties",
"category_nicename": "ties",
"category_parent": 0
}
],

Not sure how to call that in the post template:

Vue.component('post', 
{
    props: ['title', 'excerpt', 'permalink','category'],
    template: `
    <div>
        <h2 v-html="title"></h2>
        <span v-if="excerpt" v-html="excerpt"></span>
        <a :href="permalink">Continue Reading</a>
    </li>
    `
   });

And here:

<posts v-if="posts">
                <post 
                  v-for="post in posts"
                  
                  class="blog-posts-main-item"
                  :id="'post' + post.id"
                  :title="post.title.rendered"
                  :permalink="post.link"
                  :excerpt="post.excerpt.rendered"
                  :key="post.id"
                  >
                </post>
                
              </posts>

Appreciate your help!

Offset posts

Thanks for putting this together!

If I was to offset the posts, to grab all posts after 3, for example, how would you go about that?

Much appreciated!

Edit* Scratch that, I found it: wp-json/wp/v2/posts?per_page=2&offset=3&page=

Display post initial posts before clicking to load more

Thank you so much for this great work.

I want to get 4 post displayed on page load so that more posts will be loaded when the load more button is clicked.

Thank you