Nuxt3のuseFetchとawait

Promiseオブジェクトであるため async / await が利用可能です。 Nuxt.jsはTop-Level Awaitに対応していますので、<script setup>のルートではasync宣言をしなくてもawaitが利用可能です。 <template> <pre>{{ data.time }}</pre> </template> <script setup> const { data } = await useFetch('/api/lazy'); </script> awaitは処理をブロックする JavaScriptの基本的なおさらいから入りますがawaitは非同期処理が解決されるまでJavaScriptの処理をストップします。 実際の挙動を見ていきましょう。 まずは、server/api/lazy.tsとして以下のレスポンスに2秒ぐらいかかかるAPIを用意します。