How to access collections in a WebC component?

[helenclx]

Hi, I am trying to refactor my portfolio website that was built in Eleventy. However, I cannot figure out how to access my collection in a WebC component.

I want to refactor my header, which is a WebC component to render links by looping through my "pages" collection. I read the webc:for Loops section of the WebC article on Eleventy's official documentation, so I am trying to do something like this in the HTML portion of my header WebC component:

When I tried to search in the Eleventy Discord server, I discovered a thread in September 2023 where someone also asked about using collections in WebC, but the only reply was a suggestion of replacing the [1, 2, 3] in the samples in the documentation with a collections variable, such ascollections.pages, which did not work at all, since when I tried to build my pages, the terminal would output error messages stating the variable as undefined.

[11ty] Original error stack trace: Error: Check the dynamic attribute: `webc:for="collections.pages"`.
[11ty] Original error message: Cannot read properties of undefined (reading 'pages')

When I tried to console.log collections.pages, my browser console outputs shows Uncaught ReferenceError: collections is not defined.

The OP of the September 2023 Discord forum thread is no longer in the server, and the thread received no other replies, and I have also tried to search the internet, but there is a surprising lack of information and resources about accessing collections in WebC, so I am unable to find the solution.

Is there an actual way to access our collections in a WebC component?

[helenclx]

Update: I decided to make my header template to a Nunjucks file so I can iterate my pages collection to render navigation links. That said, I would still like to see more support and documentation for accessing collections in WebC.

[pdehaan]

I think the 11ty/11ty-website is written in .webc and might have some examples: https://github.com/search?q=repo%3A11ty%2F11ty-website+path%3A*.webc&type=code

[rothsandro]

In components you need to use the $data prefix to access global variables: $data.collections.pages should work.

See the release notes

[helenclx]

I tried and still had no success, unfortunately.

[helenclx]

The only WebC components I could find that access the collections were from solution-loisir's webc-starter-kit, which creates collections by using a separate config file in JavaScript.