How to read the local JSON file in Vue

In this tutorial, we are going to learn about how to read and display the local JSON file in a Vue app.

Consider, we have this following users.json file in our vue.js app.

[
  {
    "id": 23,
    "name": "Opera"
  },
  {
    "id": 24,
    "name": "Kevin"
  },
  {
    "id": 25,
    "name": "Lora"
  }
]

Reading the JSON file

We can read a (local) JSON file by importing it into the vue component and rendering the data into the dom by looping through it.

<template>
  <div id="app">
    <ul>
      <li v-for="user in users" :key="user.id">         {{user.name}}       </li>    </ul>
  </div>
</template>

<script>
import usersData from "./users.json";
export default {
  data() {
    return {
      users: usersData,    };
  },
};
</script>

In the above code, we first imported the users.json file as usersData then assigned it to the users data property.

At final, we loop through the users (json) data using v-for direcive and rendered it into the dom.