by Sai gowtham

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.

users.json
[
  {
    "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.

App.vue
<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.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course