Client side data in 11ty

2 minute read

A little context

I recently built out a fun two-part project for Edinburgh Science festival.

The first bit was a quiz. It was built with Vue, hosted on Netlify, and made use of serverless functions to pop the data to airtable. Big ups to Jason for his amazing course on frontend Masters.

The second part was a 'thankyou' page to be sent to donators. This thankyou page needed to showcase some of the data collected the airtable base.

I was up against it a bit timewise by the time we got to the second part so I figured a nice trusty 11ty site was the way to go. I could fetch data at build time with no worries about people snooping on my API keys, and could even trigger a regular build to keep that data nice and current.

I started building out the page, and it was all going well until I realised I didn't just need this data in my templates. I needed to use it in my client side JS too, specifically, in my animation code. Balls.

Luckily I stumbled upon this super cool 11ty trick! The permalink field in our file's Front Matter Data allows us to change the output filetype of an exported template.

🥳 Heck yeah, we can build out our own 'api' using 11ty data and consume it on the client side.

I just jotted down the bits of data I needed and told 11ty to output it as JSON for me.

The good stuff

---
permalink: '/api/data.json'
---

[
  {
    "score": "{{ donators.score }}",
    "characters": "{{ donators.characters }}",
    "ages": "{{ donators.ages }}"
  }
]

Then grabbed the data to use in my animations. Bosh. Problem solved.

axios.get('/api/data.json')
  .then(function (response) { 
   // do stuff with the data. woop!
  }

11ty rules.