Web developer

Use the Flickr API to fetch images with Nuxt.js

The problem

I was building a website using Netlify CMS. However, Git is not really a great tool when it comes to manage a lot of images. I had to find a simple image management tool, so they're not stored directly in the Git repository.

Then I thought about Flickr and how I could use their API to fetch images from a user or an album.


Now we have to check the available endpoints of the Flickr API to find the ones we interested in. For my case, I needed the flickr.people.getPhotos endpoint to fetch the list of images fo a specific user, and then for each image the endpoint since I needed exact sizes for the layout library I used.

Fetch images

In the page component, I used the asyncData method. First, let's get the images:

async asyncData({ $axios, $config: { apiKey, userId, flickrUrl } }) {
const params = {
api_key: apiKey,
user_id: userId,
format: 'json',
nojsoncallback: true

let { data: flickrPhotos } = await $axios.get(flickrUrl, {
params: {
method: 'flickr.people.getPhotos'

flickrPhotos =


apiKey, userId and flickrUrl are environments variables defined in the privateRuntimeConfig option of the nuxt.config.js file. They are then available through the $config attribute of the context object.

Then get their sizes:

let photos = []
for (const photo in flickrPhotos) {
const { data: flickrSizes } = await $axios.get(flickrUrl, {
params: {
method: '',
photo_id: flickrPhotos[photo].id

const sizes = flickrSizes.sizes.size

id: flickrPhotos[photo].id,
title: flickrPhotos[photo].title,
meta: sizes

return {

The images will be available through the photos object, and can be passed to any desired component.