[Vue3/Nuxt] jsonファイルからデータを受け取る方法

※初学者の投稿です。

バックエンドがまだ出来上がっていない時にjsonに仮データを作り、表示させる方法。

【jsonファイル】

【表示させるコンポーネント】

①【jsonファイル】のようにテストデータを作成。
② ①を【表示させるコンポーネント】でまずは読み込む。(1~3行目)

<script setup lang="ts">
  import lesson from '..//..//assets/json/lesson.json'
</script>

③ ②で読み込んだjsonファイルを呼び出す。(６行目~8行目)
[0]の部分を[1]に変えると test2 が表示されるよ。

<template>
  {{ $route.params.id }}
  <div>
    <p>{{ lesson[0].title }}</p>
  </div>
</template>

④こんな感じで表示される。完成

５行目の{{ $tute.parasms.id }}はページが変わったらその変わったページの情報を引っ張ってくる処理。
これはまた追々てな感じで。

以上。

次回、動的ルーティングにおいてのjsonファイル読み込みをやっていきます。