Vue.jsでローカルのjsonファイルの読み込み方法

Vueでwebサービスを作っていて、サーバー取得でなく、ローカルのjsonファイルを使用したい場面があったので、実装方法を調べてみました。

jsonファイルの配置

まず、jsonファイルをsrc/assets配下に置きます。

今回はsample.jsonとして以下のようなものを使用します。

{
    "sampleData" : [
        {
            "title": "A",
            "description": "AAA"
        },
        {
            "title": "B",
            "description": "BBB"
        },
        {
            "title": "C",
            "description": "CCC"
        }
    ]
}

importして使用する

あとは使いたいファイルでimportして使用するだけです。importした後にdataに設定します。

<template>
  <v-container>
    <v-list>
      <v-list-item 
        v-for="(sample, key) in samples" 
        :key="key">
        {{ sample.title }} : {{ sample.description }}
      </v-list-item>
    </v-list>
  </v-container>
</template>

<script>
  import sampleJson from '../assets/sample.json';
  
  export default {
    data() {
      return {
        samples: sampleJson
      };
    }
  };
</script>