How to access external JSON file objects in a Vue.js app?

Sometimes, we want to access external JSON file objects in a Vue.js app.

In this article, we’ll look at how to access external JSON file objects in a Vue.js app.

How to access external JSON file objects in a Vue.js app?

To access external JSON file objects in a Vue.js app, we can import the JSON file directly.

For instance, we write

data.json.

[
  {
    firstname: "toto",
    lastname: "jones",
  },
  {
    firstname: "toto2",
    lastname: "jones2",
  },
];

Then we can use it in a component by writing

<script>
import json from "./data.json";

//...
export default {
  //...
  mounted() {
    json.forEach((x) => {
      console.log(x.firstname, x.lastname);
    });
  },
  //...
};
</script>

We import the JSON array with

import json from "./data.json";

And then we call json.forEach to loop through it since json is an array.

Conclusion

To access external JSON file objects in a Vue.js app, we can import the JSON file directly.