How to use the Instagram API with JavaScript

Introduction

This tutorial will show you how to use the Instagram API with JavaScript. We will go step-by-step thru setting up and developing a new Nuxt.js app with Yarn. Then we will use Node.js on the command line to run a development server to render our user interface which will call the Instagram API with the push of a button.

$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt.js @ v2.14.1                   │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

Prerequisites

To take full advantage of this tutorial you will need to have the following:

• Node.js
  Node.js JavaScript runtime (version 10.13 or later)
• Yarn
  Yarn package manager (similar to npm)
• Terminal app (to run a shell / command line)
• IDE or text editor (to edit code)
• A basic understanding of programming
• Some experience with JavaScript

Note: the instructions given here for the command line are going to be from a Linux point of view but any forward-slash / based shell should work fine, for example: bash.

Frameworks

Vue	Nuxt	Vuetify
The Progressive JavaScript Framework	The Intuitive Vue Framework	The Interface Vue Framework

We will be working with three top frameworks to build our app.  Vue combines script, markup & style to build a web-based user interface.  Nuxt organizes your code using best practices.  And Vuetify lets you easily add beautiful UI components.

Legend

Symbols and formatting you will find in this document:

Command: This is something you type into the terminal.

Output: This is something your command will output in the terminal.

Note: This is a note about the current topic being discussed.

Code text: This is a key phrase that we have in our script files, or other system location.

Source file:

  This is content we have in one of the files of our application.

  Notice the buttons in the upper right corner of this block.

Quote: This is usually something that is quoted from referenced material.

Steps

It is best to read thru this entire tutorial to learn how to use the Instagram API with JavaScript.  We are going to follow these basic steps:

1. Install the software
2. Sign-up for the Instagram API
3. Test the API in the command line
4. Create the user interface

Install

Before we get to use the Instagram API we need to set up our JavaScript environment.

Node.js

Node is the JavaScript runtime engine that powers the development server.
To see if you have it installed run this command in a shell:

node -v

It should come back with a version number:

v14.8.0

Otherwise you can download and install it from: nodejs.org.

Yarn

Yarn is a package manager that can control what software libraries your project installs and maintains. If you don’t have it and can’t install it and know how to use npm, you can use that instead of Yarn.

To see if you have Yarn installed run this command in a shell:

yarn -v

It should come back with a version number:

1.22.4

Otherwise you can download and install it from: yarnpkg.com.

Note: Yarn 1 id preferred over Yarn 2 until the bugs in the newer version can be worked out.

Starter App

We’re going to use Yarn to create a Nuxt.js app called nuxt-app.
Type this command in the shell:

yarn create nuxt-app nuxt-app

and you should get something back like this:

yarn create v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-nuxt-app@3.2.0" with binaries: - create-nuxt-app

The installer will then ask you some questions about how to configure your setup:

create-nuxt-app v3.2.0
✨ Generating Nuxt.js project in nuxt-app

? Project name: nuxt-app
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules:
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

🎉 Successfully created project nuxt-app
Done in 525.23s.

Note: Don’t worry if there are info messages and warnings about incompatible versions and deprecations. These are from third-party libraries that still work fine.

Default

Note: It’s probably a good idea to open two separate terminal instances.  One to execute commands and the other to just run the development server.  Both terminals should change directory to nuxt-app.

Change directories to our package directory and run the development server:

cd nuxt-app && yarn dev

The output should look like:

yarn run v1.22.4
$ nuxt

ℹ NuxtJS collects completely anonymous data about usage.
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? Yes

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt.js @ v2.14.1                   │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development
ℹ Initial build may take a while
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 26.65s

ℹ Waiting for file changes
ℹ Memory usage: 426 MB (RSS: 538 MB)
ℹ Listening on: http://localhost:3000/

View

Open a web browser and visit: http://localhost:3000 and you should see something like this:

Structure

Your directory structure should be:

nuxt-app/
├── assets/
│   ├── README.md
│   └── variables.scss
├── .babelrc
├── components/
│   ├── Logo.vue
│   ├── README.md
│   └── VuetifyLogo.vue
├── .editorconfig
├── .eslintrc.js
├── jest.config.js
├── layouts/
│   ├── default.vue
│   ├── error.vue
│   └── README.md
├── middleware/
│   └── README.md
├── node_modules/
├── nuxt.config.js
├── package.json
├── pages/
│   ├── index.vue
│   ├── inspire.vue
│   └── README.md
├── plugins/
│   └── README.md
├── README.md
├── static/
│   ├── favicon.ico
│   ├── README.md
│   ├── v.png
│   └── vuetify-logo.svg
├── store/
│   └── README.md
├── test/
│   └── Logo.spec.js
└── yarn.lock

Routing

Nuxt.js creates automatic routing for us for all directories and files under the pages directory. So the view we see at the root (http://localhost:3000/) is served by pages/index.vue.

Layout

By default Nuxt.js will use layouts/default.vue for the main layout.

Linting

If you installed the ES (ECMAScript) Linter during installation let’s disable the rule that disallows commas on the last entry of a container object, like Arrays, for example. We’ll do this by adding a rule to the config file:
.eslintrc.js:

rules: {
  'comma-dangle': ['off']
}

Instagram API

We will use the Instagram API from yuananf since it is free for up to twenty (20) requests per day.

API Key

Like most API services on the Internet we are required to signup in order to obtain an API Key.  We supply this key to their endpoints with every request.  It is used to track us to make sure we are abiding by their Terms Of Service.  Basically they want to make sure we’re not spamming them too quickly.

RapidAPI

The easiest way to get started is to open up a web browser, signup for a free account with RapidAPI and head over to the dashboard.  Click on the blue Subscribe to Test button and select the Basic (free) plan:

• • https://rapidapi.com/yuananf/api/instagram28

RapidAPI Instagram Dashboard

Endpoint

The API endpoint we want is MediaLikers.  The response will return info about all the users who liked a particular upload.  This endpoint requires an Instagram Shortcode which is a unique identifier for a piece of media, for example an image or a video.  You can use your own shortcode or you can use this one: BzinsTanXXv.

This shortcode is found at the end of the following URL:

• • https://www.instagram.com/p/BzinsTanXXv/

Command Line

Now we’re ready to test the MediaLikers endpoint to the Instagram API we just subscribed to.

Click on “GET MediaLikers” in the left-hand column or on the following direct link:

• • https://rapidapi.com/yuananf/api/instagram28?endpoint=apiendpoint_a5176aea-10cc-4481-b5ba-8a18bdee016a

In the Code Snippets section: go to the code selector drop-down and select (Shell) cURL then click Copy Code.

Paste the code you just copied to the clipboard into your terminal and press enter to run it.

curl --request GET \
  --url 'https://instagram28.p.rapidapi.com/media_likers?short_code=BzinsTanXXv' \
  --header 'x-rapidapi-host: instagram28.p.rapidapi.com' \
  --header 'x-rapidapi-key: [PUT YOUR API KEY HERE]'

Note: You should paste in the code you copied because the one above does not contain a valid key.

You should get back lots of data about Nodes.  Save the entire output text to a JSON file.
assets/instagram.json:

{"data":{"shortcode_media":{"id":"2081400546117121519","shortcode":"BzinsTanXXv","edge_liked_by":{"count":1896,"page_info":{"has_next_page":true,"end_cursor":"QVFDNHFfQzNtdUFPTTloeWNUaUQxQ0tVTmNVVDkyazJhTGtWUWFMcDFuMS10ak94emtFNHVKOVRzcVhBcWZVOEhpR1BNYzhvamYxdW55aElCUENTUFdpQQ=="},"edges":[{"node":{"id":"46907128","username":"briana1872","full_name":"Briana","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/38097070_673518503010762_714415041721401344_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=FrGq64GIvtUAX-9eNoX&oh=588a919f259d02041661b30233a2551c&oe=5F61E0F1","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"4728807805","username":"talomlenzing","full_name":"lenzing talom","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/107259240_276273430312888_8113026924666624601_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=QnZ2pVPrQR0AX-Gjdjz&oh=d3ecb64db06163d5f847838e1a654dd3&oe=5F6179AE","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"38203949340","username":"maxbrody9","full_name":"Max Mueller","profile_pic_url":"https://instagram.fcgh2-1.fna.fbcdn.net/v/t51.2885-19/44884218_345707102882519_2446069589734326272_n.jpg?_nc_ht=instagram.fcgh2-1.fna.fbcdn.net&_nc_ohc=d3zLaxzyOPwAX9rYtT0&oh=a860d085bdfd3ff5bd33edf2124c138a&oe=5F5ED20F&ig_cache_key=YW5vbnltb3VzX3Byb2ZpbGVfcGlj.2","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"3417497582","username":"m.m.z.p_45","full_name":"m.m.z.p.45","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/51393388_2262438944023219_8640968140735381504_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=CzJ1d_L72bQAX_yuhcZ&oh=a46f0ee55a7dcbc0002845d2e9ed7b57&oe=5F5EEE03","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"6184807875","username":"jake_1352","full_name":"Jake","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/22277436_380798229005090_5513869969403674624_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=xkkqMBj7baQAX-HGUKL&oh=e26c450fddda00b501a734a91995903e&oe=5F60F30F","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"25599966071","username":"gardening_weekly","full_name":"","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/93360400_231752168068836_2966321770027548672_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=ljXQg9BNGPgAX-bdbfn&oh=e932433c5536fb59355f454d80cfa95d&oe=5F624910","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"189022666","username":"pambin","full_name":"Pambi💫","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/19984963_102712527050424_1017284135296696320_a.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=CLsnpyWx-WgAX8Gr_lb&oh=2e72afec67ee39d76fd7a8f56137a015&oe=5F615987","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"9432961597","username":"sakil.22","full_name":"Sakil Ahmed","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/90993693_3059522864111948_1852138284860309504_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=Rhvijkylu4sAX86pxAg&oh=b90b0528fa25ba780e6fc0624928d680&oe=5F5FC897","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"2123884998","username":"alexis_1394_nez","full_name":"","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/103629752_564142224472001_8171551700386386310_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=C7sGAUdfhSkAX8JrU0o&oh=aa2e900bbb35ce9785f1ab48668ed5c5&oe=5F61BFD3","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"34348342","username":"nicky.zeee","full_name":"ℕ𝕚𝕔𝕜 ℤ𝕠𝕣𝕠𝕪𝕒","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/84176925_696081817462927_8192835771376336896_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=AzvaGrHHj-UAX_EQc-P&oh=e5a962a9a36cb7915638d1b0a5762311&oe=5F603BE0","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"30053722","username":"bunchabates","full_name":"🌿 kt bates 🌿","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/95266825_634217417156502_6265893265187274752_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=_p61AoejVjAAX8zOc-h&oh=5dcab0d98e9d426e6d958881a4e5cbf8&oe=5F5FC474","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"2680137037","username":"nicogrocholewski","full_name":"Nico Grocholewski Sembiring","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/90938297_789377821465859_1418838065366958080_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=UoRc_gsJqcYAX-mtxvY&oh=d6c3ac0b10f108e0e3cceca13777d6b8&oe=5F619050","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"9057774391","username":"de.bora9215","full_name":"@,Perla, Ana.","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/95565866_225891575504991_5323056250458472448_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=eAiW-dxfsMoAX_-RNoP&oh=dfe33badc7efc7dee9dce5fdc159cdad&oe=5F5FDD5C","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"604996582","username":"kaitpittman","full_name":"Kaitlyn Pittman","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/12357515_736985729766117_1778932993_a.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=0t17L93FL5EAX86-XnN&oh=f7f9f58ccd5ba38be251a051206f536b&oe=5F60DB01","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"5626710023","username":"amayarufino","full_name":"Rufino Amaya","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/19228139_1957229081200600_9069087774971265024_a.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=hQ666Ukmy30AX8sLUOK&oh=125922bc7e4e82c8898f49d133bc2575&oe=5F626FF2","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"441188405","username":"tatertot80","full_name":"TATER","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/11417325_1713871298836358_1410651461_a.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=q6viXE6u_3wAX_CjMXm&oh=0497f548e29d4c608c52aab2d9c8c051&oe=5F6024EE","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"14714790909","username":"moonlighthillfarm","full_name":"Moonlight hill farm","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/101249341_544415936247384_5650879288707121152_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=tgO_cdhlqgAAX82NzHW&oh=dce510b6067cb586a1f60e303f313288&oe=5F5FDDD7","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"1594862636","username":"m_h_e_r_","full_name":"Mher","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/103549889_576891793257633_3123462966360615075_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=LMoNxDOACcMAX_cq3-E&oh=f824136d3ec539a16bb9f8b67dcaf78b&oe=5F60F901","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"635101218","username":"muhammadrabdullah1","full_name":"Muhammad R. Abdullah","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/104664571_997195870700953_2547029243696978355_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=fmALO_2qqggAX93uNKb&oh=45c7ac876a322db7931e1958ba81042c&oe=5F5FC8D1","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"12116403501","username":"gibson.paddy","full_name":"Paddy Gibson","profile_pic_url":"https://instagram.fcgh2-1.fna.fbcdn.net/v/t51.2885-19/44884218_345707102882519_2446069589734326272_n.jpg?_nc_ht=instagram.fcgh2-1.fna.fbcdn.net&_nc_ohc=d3zLaxzyOPwAX9rYtT0&oh=a860d085bdfd3ff5bd33edf2124c138a&oe=5F5ED20F&ig_cache_key=YW5vbnltb3VzX3Byb2ZpbGVfcGlj.2","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}}]}}},"status":"ok"}

Tip: You can add an output “redirect”, which is just a greater-than symbol (>), to the end of your curl command, followed by the file name, to save it directly into the file.

curl --request GET --url 'https://instagram28.p.rapidapi.com/media_likers?short_code=BzinsTanXXv' --header 'x-rapidapi-host: instagram28.p.rapidapi.com' --header 'x-rapidapi-key: [PUT YOUR API KEY HERE]' > assets/instagram.json

Keep Your Key

Note: Keep your x-rapidapi-key somewhere handy as we will need it for later.

UI

Now let’s create the user interface to access the the Instagram API with JavaScript and display the results.  We will add a new route for the page we will be working with.

Navigation

First add a link in the navigation drawer on our layout in the exported data items:
layouts/default.vue:

...,
items: [
  {
    icon: 'mdi-apps',
    title: 'Welcome',
    to: '/'
  },
  {
    icon: 'mdi-chart-bubble',
    title: 'Inspire',
    to: '/inspire'
  },
  {
    icon: 'mdi-instagram',
    title: 'Instagram',
    to: '/instagram'
  },
],...

If we visit this page we’ll get a 404-not-found error since we haven’t created it yet:

Template

So let’s create a new page.
To start off with let’s just display the Instagram icon from MDI:
pages/instagram.vue:

<template>
  <v-layout>
    <v-flex class="text-center">
      <v-icon
        size="100pt"
      >
        mdi-instagram
      </v-icon>
    </v-flex>
  </v-layout>
</template>

Now our page should look better:

JSON Viewer

Let’s add Tyler Krupicka’s JSON Tree Component package so that we can view our results in a nice hierarchical tree viewer.

On the command line, tell Yarn to add the component:

yarn add vue-json-component

Again don’t worry about the warnings:

yarn add v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-json-component@0.4.1
info All dependencies
└─ vue-json-component@0.4.1
Done in 31.21s.

Vue

You may have noticed that files with the .vue extension like layouts/default.vue that we looked at earlier contain both markup and script.  They can also contain style as well.  These are called single-file components and are made possible by the Webpack build system used by Nuxt.js.

Finishing Up

It’s probably a good idea to develop our UI using cached data so we do not risk going over our maximum requests per day as stipulated in the API Terms of Service.

Cached Data

Let’s add a button to fetch our saved instagram.json file that we created earlier.

Replace our view to look like this:
pages/instagram.vue:

<template>
  <v-layout>
    <v-flex class="text-center">
      <v-icon size="100pt">
        mdi-instagram
      </v-icon>
    </v-flex>
    <v-flex>
      <v-card>
        <v-card-title class="headline">
          Let's get some data
        </v-card-title>
        <v-card-actions>
          <v-btn
            title="Clear"
            @click="clear"
          >
            X
          </v-btn>
          <v-btn
            title="Go get the fake data"
            color="primary"
            @click="getInstagramFakeData"
          >
            Fake
          </v-btn>
        </v-card-actions>
        <v-card-text>
          <json-view :data="result" />
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>

Then we also want to add the script to that same file.
pages/instagram.vue:

<script>
import { JSONView } from 'vue-json-component'
import instagram from '../assets/instagram'

export default {

  components: { 'json-view': JSONView },

  data () {
    return {
      result: {},
    }
  },

  methods: {
    clear () {
      this.result = {}
    },
    getInstagramFakeData () {
      this.result = instagram
    },
  },
}
</script>

Now when we visit our Instagram page and click the blue FAKE button we should see the JSON viewer populated with our cached data:

Live Data

Now let’s add another button to the <template> section to request the real data.

pages/instagram.vue:

<v-btn
  title="Go get the real data"
  color="success"
  @click="getInstagramAPIData"
>
  Fetch
</v-btn>

And we’ll add a new function to the <script> section as the click-handler:

async getInstagramAPIData () {
  const query = {
    short_code: 'BzinsTanXXv', // use any shortcode you want
  }

  const url = new URL('https://instagram28.p.rapidapi.com/media_likers')
  url.search = new URLSearchParams(query).toString()

  const headers = {
    'x-rapidapi-host': 'instagram28.p.rapidapi.com',
    'x-rapidapi-key': '[PUT YOUR API KEY HERE]',
  }

  const response = await fetch(url.toString(), { headers })
  this.result = await response.json()
},

Note: Remember that key we saved from earlier?  Don’t forget to replace the [PUT YOUR API KEY HERE] text on line #11 with your actual API Key.

When you click the green FETCH button the JSON tree viewer should be displaying real live data.

Format

Let’s update our page format format a little.  Replace the current template to look like this:

pages/instagram.vue:

<template>
  <v-layout>
    <v-card class="mx-auto">
      <v-app-bar>
        <v-toolbar-title>
          <v-icon size="xx-large">
            mdi-instagram
          </v-icon>
        </v-toolbar-title>
        <v-spacer />
        <v-btn
          title="Clear"
          @click="clear"
        >
          X
        </v-btn>
        <v-btn
          title="Go get the fake data"
          color="primary"
          @click="getInstagramFakeData"
        >
          Fake
        </v-btn>
        <v-btn
          title="Go get the real data"
          color="success"
          @click="getInstagramAPIData"
        >
          Fetch
        </v-btn>
      </v-app-bar>
      <v-container>
        <v-row dense>
          <v-col cols="12">
            <json-view :data="result" />
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-layout>
</template>

Things are looking a little cleaner now:

Let’s now add in some UI components to display the API results data.

Add a new display column to the template:

<v-container>
  <v-row dense>
    <v-col cols="12">
      <json-view :data="result" />
    </v-col>
    <v-col
      v-for="(edge, i) in edges"
      :key="i"
      cols="12"
    >
      <v-card>
        <div class="d-flex flex-no-wrap justify-space-between">
          <div>
            <v-card-title
              class="headline"
              v-text="edge.node.full_name"
            />
            <v-card-subtitle v-text="edge.node.username" />
            <v-chip filter :disabled="!edge.node.is_private" :input-value="edge.node.is_private"> Private </v-chip>
            <v-chip filter :disabled="!edge.node.is_verified" :input-value="edge.node.is_verified"> Verified </v-chip>
            <v-chip filter :disabled="!edge.node.followed_by_viewer" :input-value="edge.node.followed_by_viewer"> Followed </v-chip>
            <v-chip filter :disabled="!edge.node.requested_by_viewer" :input-value="edge.node.requested_by_viewer"> Requested </v-chip>
          </div>
          <v-avatar class="ma-3" size="125">
            <v-img :src="edge.node.profile_pic_url" />
          </v-avatar>
        </div>
      </v-card>
    </v-col>
  </v-row>
</v-container>

And add in a computed method to keep track of our results “edges”:

data () {
  return {
    result: {},
  }
},

computed: {
  edges () {
    console.log(this.result)
    if (
      this.result &&
      this.result.data &&
      this.result.data.shortcode_media &&
      this.result.data.shortcode_media.edge_liked_by
    ) {
      return this.result.data.shortcode_media.edge_liked_by.edges
    } else {
      return []
    }
  }
},

methods: {

Now it actually looks like we have some data coming back from the API:

Wrapping Up

I hope you enjoyed this tutorial and perhaps learned something about how to build an application using the Instagram API with JavaScript.  Nuxt.js seems like a good framework to write packages that adhere to current best practices, and that’s nice.

Take a look at the GitHub code to see how to add a nice loading animation.  And of course, if you have any questions be sure to leave in the comments below.

GitHub Project

If you would like to see the final version of the project have a look at this GitHub repository.

FAQ