Question: can I use pagination, or is this currently not supported

[richardfrench]

<template>
<div>
<p v-html="test"></p>
</div>
</template>
<script>
export default {
    data: () => {
        return {
            test: "HELLO",
            permalink: "user/{{ user.name | slug }}/",
            pagination: {
                data: userList,
                size: 1,
                alias: user,
            }
        };
    }
}
</script>

Think what you've come up with looks really great. I've tried the above, but I get an error. That's the standard pagination you might use in an njk file, for example.

Cannot read property 'userList' of undefined

`TypeError` was thrown:
    TypeError: Cannot read property 'userList' of undefined
        at Object.data (/Users/richard/Documents/eleventy-vue-demo/.cache/vue/about.js:18:21)
        at module.exports (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/Util/GetJavaScriptData.js:10:18)
        at CustomEngine.getExtraDataFromFile (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/Engines/Custom.js:65:22)
        at async Template.getFrontMatterData (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/TemplateContent.js:144:21)
        at async Template.getData (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/Template.js:235:29)
        at async Template.getTemplateMapEntries (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/Template.js:744:16)
        at async TemplateMap.add (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/TemplateMap.js:32:21)
        at async Promise.all (index 0)
        at async TemplateWriter._createTemplateMap (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/TemplateWriter.js:169:5)
        at async TemplateWriter.writeTemplates (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/TemplateWriter.js:203:5)
        at async TemplateWriter.write (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/TemplateWriter.js:254:25)
        at async Eleventy.write (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/Eleventy.js:743:13)
        at async Eleventy.watch (/Users/richard/Documents/eleventy-vue-demo/node_modules/@11ty/eleventy/src/Eleventy.js:650:5)

Am I doing it wrong, or is pagination not currently supported? Is there another way of achieving it? We currently use Nunjucks for our 11ty product at work, and I'm keen to use Vue instead.

Thanks!

[richardfrench]

So the below seems to produce more promising results. It generates 3 pages, as there are 3 users in my data file. Leaving off the permalink property makes the URLs based on their index. Trying to append user.name or indeed any other user property to the end of the permalink string doesn't seem to work. Have I got the right idea?

<template>
<div>
<p v-html="test"></p>
{{user.name}}
</div>
</template>
<script>
export default {
    data: () => {
        return {
            permalink:"/user/" + Math.random(),
            test: "HELLO",
            pagination: {
    data: "userList",
    size: 1,
    alias: "user"

  },
        };
    },
}
</script>

[spacedawwwg]

I've not tested this code, but you could try:

The 11ty permalink is a funny one as, even though it's data, the 'data' is passed back into it (kinda like a computed property) so you can access you shortcodes/javascript functions with this

<script>
export default {
  data: () => ({
    test: "HELLO",
    permalink() {
      return `user/${this.slug(this.user.name)}/`
    },  
    pagination: {
      data: 'userList',
      size: 1,
      alias: 'user',
    }
  })
}
</script>

Kinda off-topic, but I personally think it'd better for this eleventy plugin to extend Vue as well with an eleventy object rather than merging it all in with data, something like:

<script>
export default {
  data: () => ({
    test: "HELLO",
  }),
  eleventy: () => ({
    title({ article }) => article.title,  
    permalink({ article }) => article.slug,  
    pagination: {
      data: 'articles',
      size: 1,
      alias: 'article',
    }
  })
}
</script>

...I dunno.

[lucasdinonolte]

Paginating with Vue for Page Templates works for me by passing a function argument to the permalink function as shown below. The argument passed to the function seems to contain the global 11ty data object for your page. Hope this works for you as well.

<script>
export default {
  data: () => ({
    permalink(data) {
      return `articles/${data.article.slug}/`
    },  
    pagination: {
      data: 'articles',
      size: 1,
      alias: 'article',
    }
  })
}
</script>

[zachleat]

Hey sorry for the late reply here. I just did find an example of this working in our codebase.

I think the original mistake was that pagination.data needs to be a string. A little confusing when you’re looking at it from YAML on the docs, I’d agree https://www.11ty.dev/docs/pagination/#paging-an-array

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!