How to load JSON data using Axios with Vue.js / Nuxt.js

This tutorial, we tackle the most common question of how to load JSON data in Vue.js and Nuxt.js using GET HTTP request. We do this by using AXIOS. This package we have installed is already when creating the application using Nuxt.js.

Step by Step Guide #1

1. Create a new Vue page

We start from the basic use of axios first, following the sample from Nuxt.js documentation.We create a new page of getapi.vue in pages folder with basic structure as follows.

I used to start from basic template to standardize the practice of coding. Also, it is more easy for me to master a new language.

2. Add Axios

Okay, we use Axios to load the external JSON data into a list first. In the <script> section, we add