Read local JSON file in Vuejs


Sometimes we need to read data from a local file, such as Mock Data which can be stored in the form of JSON format.

Create folder for mock data and place the JSON inside the folder.

[
   { "id": 1, "title": "work out from json", "isdone": true },
   { "id": 2, "title": "Fallback", "isdone": false }

] 

and in the component we can read the file using an import statement.

import  taskData from '@/mockData/taskData.json'

we can place the data as a state in store as follows

 state: {       
    tasks: taskData, 
  },

The following Vuex store post deserve a good read

  • Read local JSON file in Vuejs - How to read local JSON / how to read mock data from a JSON file in Vuejs
  • How to Modules in Vuex - State management in Vuejs with Vuex module store Using Typescript. All you need to know for kick start Vuex store modules
  • Vuex store ? - State management in Vuejs with Vuex store. All you need to know for kick start Vuex store

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.