Local JSON file in Vue

Devmnj • Sat Jun 19 2021

0 min read

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.

Source code

\[
   { "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, 
  },