Vuepress: Information on blog and pagination plugin missing from website

[jweinst1]

So, I am building a project/documentation site with vuepress,

repo: https://github.com/dr4f/site

site link: https://dr4f.github.io/site/

I am trying to follow or get how to use the blog plug in here https://vuepress.vuejs.org/plugin/official/plugin-blog.html#usage

But I don't see information on where and how the posts are displayed, does it matter if you use a home page or not, etc. Is there any way to add some context in how to use the blog plug in?

By contrast, some other plugin pages are more detailed https://vuepress.vuejs.org/plugin/official/plugin-search.html#usage

[jweinst1]

I actually found a good guide for this here https://medium.com/@adam.collier/creating-a-blog-with-vuepress-44ec0fed9718 but this doesn't look exactly like the one mentioned in the offical vuepress guide

[ulivz]

Good suggestion, and it's actually in our TODOList before we reach beta phase.

[songololo]

A simple example would really help. Right now not at all sure how to get the blog component up and running.

[Southclaws]

It seems that all plugin documentation has vanished, all links result in a 404, such as https://vuepress.vuejs.org/plugin/official/plugin-google-analytics.html

I can't seem to find the sources for these pages either.

[Shigma]

@Southclaws https://v1.vuepress.vuejs.org/plugin/official/plugin-google-analytics.html

[Southclaws]

Thanks, seems like some or all of these need updating: https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress

[rlam3]

Can we get some examples in for vuepress/blog or if anybody has a git repo that is working with it it would be greatly appreciated...

@jweinst1 were you able to find a workaround?

[nwneisen]

I created a repo where I found a few different ways to use the blog plugin. The plugin looks like it is intended to be used on a custom theme so two of the methods are a work around for someone wanting to use the default theme.

vuepress-blog-plugin-example

I can open a PR to add some of the information to the official docs if it looks valid to others.

[jweinst1]

@rlam3 yea i was, i got it to work looking like this https://dr4f.github.io/site/blog/

This is the posts component i was able to come up with

<template>
  <div class="posts" v-if="posts.length">
    <div class="post" v-for="post in posts">
      <router-link :to="post.path">
        <div>
          <img v-if="post.frontmatter.image" :src="$withBase(post.frontmatter.image)" alt="">
        </div>
        <h2>{{post.frontmatter.title}}</h2>
        <p>{{post.frontmatter.description}}</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: ["page"],
  computed: {
    posts() {
      let currentPage = this.page ? this.page : this.$page.path;
      let posts = this.$site.pages
        .filter(x => {
          return x.path.match(new RegExp(`(${currentPage})(?=.*html)`));
        })
        .sort((a, b) => {
          return new Date(b.frontmatter.date) - new Date(a.frontmatter.date);
        });
      return posts;
    }
  }
};
</script>

[nwneisen]

Another repo showing an example of using the pagination plugin.

vuepress-pagination-example

[bloycey]

Hi @nwneisen, I've cloned and have been having a look at your vuepress-pagination-example repo. It still isn't working for me however. After installing all dependencies and then running vuepress dev docs I still can't find the computed $pagination values when I inspect the app using the Vue Extension.

Perhaps I'm doing something wrong? Happy to continue the discussion over on your repo if that's more appropriate. Would really appreciate your help 🙏 🙏

[nwneisen]

Hi @bloycey, It sounds like your issue might be with the pagination directory. The pagination plugin is currently hard coded to only look in a page directory for posts. Give that a try and if it doesn't work I'd be happy to take a closer look at it with you.

[KunoichiZ]

Hi @nwneisen, I noticed on your repo for the blog plugin that there was no example of how the posts in _posts are to be displayed (unless it's there and I've completely missed it). Do you have an example?

[nwneisen]

Hi @KunoichiZ, I'm a little confused on exactly what you are looking for.

If you would like to change the display of the layouts that list the posts, there are very basic layouts found in .vuepress/theme/layouts. Otherwise, if you are asking about the page for the actual post, take a look at the vuepress content outlet component.

[KunoichiZ]

@nwneisen Sorry I confused you. I was trying to more or less ask how to display the posts in _posts. Would making a layout for displaying the posts be as simple as modifying one of the existing layouts? For example, modifying Tag.vue’s <ul v-for="post in $tag.posts"> to <ul v-for="post in $post.posts"> or something similar?

[nwneisen]

@KunoichiZ Once a user clicks on the link from the tags page, they will be directed to a page for that post. Setting up this page is covered in the Vuepress documentation I previously linked.

[KunoichiZ]

@nwneisen Oh I see, thanks!

[ulivz]

See: https://github.com/vuejs/vuepress/issues/36#issuecomment-498633025

[ulivz]

See the detailed and fresh docs of blog plugin: https://vuepress-plugin-blog.ulivz.com/