讀取遠端資料
在 nuxt 的 vue 元件檔裡,可使用 useFetch 元件來讀取遠端資料,關於 useFetch 用法可參考官網
1 2 3 4 5 6
| <script setup> definePageMeta({ layout: 'products', }) const { data: products } = await useFetch('https://fakestoreapi.com/products') </script>
|
讀取回來的資料可以在 template 渲染
1 2 3 4 5 6 7 8 9 10 11
| <template> <div> <div class="grid grid-cols-4 gap-5"> <div v-for="product in products"> <nuxt-link :to="`/products/${product.id}`" >{{ product.title }}</nuxt-link > </div> </div> </div> </template>
|