Nuxt3 の script setup ( Composition API ) で 外部APIにリクエストする

コード例

pages/example.vue

<script lang="ts">
export default defineComponent({
  async setup() {
    const { data: items } = await useFetch('https://jsonplaceholder.typicode.com/todos/')
    return {
      items
    }
  },
})
</script>

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

表示例

備考

よりシンプルな構文も試したがうまく動かなかった

<script setup lang="ts">
    const data = await fetch('https://jsonplaceholder.typicode.com/todos/')
    const { data: items } = await data.json()
</script>

環境

nuxt 3.0
vue 3.2.45

参考

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter