【Vue.js】JSONファイルからデータを取得する方法

{
  "items": [
    { "id": 1, "name": "Item 1", "description": "This is item 1" },
    { "id": 2, "name": "Item 2", "description": "This is item 2" },
    { "id": 3, "name": "Item 3", "description": "This is item 3" }
  ]
}

my-app/
├─ public/
│   └─ data.json     ← ここに置くと /data.json で取得できる
└─ src/
    ├─ data/
    │   └─ items.json ← import で取り込む場合はここ
    └─ App.vue

<script setup>
import { ref, onMounted } from 'vue'

const items = ref([])
const loading = ref(true)
const error = ref(null)

onMounted(async () => {
  try {
    const response = await fetch('/data.json')

    // fetch は 404 や 500 でも reject しない。自分で確認して throw する
    if (!response.ok) {
      throw new Error(`取得に失敗しました（ステータス ${response.status}）`)
    }

    // 開発サーバーは、存在しないパスにも index.html を 200 で返すことがある。
    // JSON ではなく HTML が返ってきていないかも確認する
    const type = response.headers.get('content-type') || ''
    if (!type.includes('application/json')) {
      throw new Error('JSON ではないデータが返ってきました。パスを確認してください')
    }

    const data = await response.json()
    items.value = data.items
  } catch (e) {
    error.value = e.message
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <p v-if="loading">読み込み中…</p>
  <p v-else-if="error">エラー：{{ error }}</p>
  <ul v-else>
    <li v-for="item in items" :key="item.id">
      <h2>{{ item.name }}</h2>
      <p>{{ item.description }}</p>
    </li>
  </ul>
</template>

// vite.config.js：サブディレクトリに配備する場合
export default {
  base: '/my/public/path/'
}

// コード側：BASE_URL を使ってパスを組み立てる
const response = await fetch(`${import.meta.env.BASE_URL}data.json`)

<script setup>
// src/data/items.json を、ビルド時にバンドルへ取り込む（通信は発生しない）
import data from './data/items.json'

// 一部のフィールドだけなら、名前付きインポートも使える（不要な部分を削れる）
// import { items } from './data/items.json'

const items = data.items
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

npm install axios

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const items = ref([])
const error = ref(null)

onMounted(async () => {
  try {
    // axios は 4xx / 5xx で自動的に reject する（response.ok の確認は不要）
    const response = await axios.get('/data.json')
    items.value = response.data.items   // JSON は response.data に入る
  } catch (e) {
    error.value = e.message
  }
})
</script>