🖥

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

に公開
tech

コード例

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>

表示例

<img width="567" alt="image" src="https://user-images.githubusercontent.com/13635059/210162409-41a02601-c5dd-44fc-9004-cf403c048a89.png">

備考

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

<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

参考

https://zenn.dev/coedo/articles/86bc31acb4ea47

チャットメンバー募集

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

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-01

Discussion