An Instagram gallery with Vue.js and CSS Grid

An Instagram gallery with Vue.js and CSS Grid

A client of mine recently requested a simple image gallery for her site — one which would display her Instagram feed. I thought: “no problemo, Instagram surely has a simple API, and this use-case is probably their most basic Hello World! example.” However, perusing the Instagram API docs, which provide almost no actual code examples, only muddied the waters. Client IDs, client secrets, access tokens? It all seemed like overkill for displaying an individual’s own public Instagram feed. Googling was also of little help — I found mostly dire posts about Instagram shutting down public API access (which is true, but the access we need is supposed to be available till 2020, so: onward!).

[…]

Then we have spots for our styles, a bit of html, and a taste of Javascript.

[…]

We create a new Vue instance, and first tell Vue what element to control, with el: '#app'. Then we set up some data for Vue to keep track of:

[…]