11ty / eleventy-plugin-vue

Use Vue.js templates and Vue.js single file components in Eleventy.
196 stars 11 forks source link

Pagination is creating multiple HTML files, but with the same content on each one #48

Open philwolstenholme opened 1 year ago

philwolstenholme commented 1 year ago

I'm using Eleventy 2.0.0-canary.18 and the Vue plugin 0.7.4. My whole package-lock.json is here.

I'm trying to split https://wolstenhol.me/github-stars up into multiple pages showing 15 items per page. It's using some global data as the source.

You can see how the file is set up here: https://github.com/philwolstenholme/wolstenhol-11ty/blob/github-star-pagination/src/github-stars.vue:

<template>
  <article>
    <!-- … -->
    <PwGitHubStars :stars="pagination.items"></PwGitHubStars>
    <p>This is page {{ pagination.pageNumber }}</p>
     <!-- … -->
  </article>
</template>

<script>
import PwGitHubStars from './includes/pw-git-hub-stars.vue';
export default {
  data: {
    layout: 'page',
    title: 'Github stars',
    seo: {
      description: `Partly for me to big up great projects, and partly as a set of things to check out later.`,
      changeFreq: 'weekly',
    },
    // eleventyNavigation: { key: 'github-stars' },
    pagination: {
      data: 'githubStars',
      size: 15,
    },
    permalink(data) {
      const parts = [data.page.filePathStem];
      const pageNumber = data.pagination.pageNumber + 1;
      if (pageNumber === 1) {
        return `${parts.join('.')}/index.html`;
      }
      return `${parts.join('.')}/${pageNumber}.html`;
    },
  },
  components: { PwGitHubStars },
};
</script>

Eleventy is creating files with the right filenames, but they all have identical content. pagination.pageNumber is 0 for all of them:

etc…

If this isn't a user error on my part then I think this might possibly be a Vue plugin issue rather than an Eleventy issue, because if I stick the below content into a github-starz.njk file then the output is as I'd expect (different items on each page):

---
title: Github stars
pagination:
  data: githubStars
  size: 12
---

{%- for item in pagination.items %} - [{{ item.name }}]({{ item.url }}) {%- endfor %}

Can anyone see what I'm doing wrong? A branch demoing the problem can be found here but you won't be able to build it, unfortunately (it relies on a bunch of local environment variables that I can't share, API keys etc).