Nuxtでaxiosを使い、APIのデータを表示する方法です。
JSONPlaceholderはJSON形式でテスト用データを配信しているサイトです。ここからデータを取得します。
[pages/sample.vue]
※Laravelと連携の場合は client/pages/sample.vue
<template>
<div>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData({ $axios }) {
const users = await $axios.$get(
"https://jsonplaceholder.typicode.com/users",
{
params: {},
}
);
return { users };
},
};
</script>
