<script>
export default {
  provide() {
    return {
      posts: this.posts,
    };
  },
  mounted() {
    getPosts().then((res) => {
      this.posts = res;
      this.loading = false;
    });
  },
  data() {
    return {
      posts: [],
      loading: false,
    };
  },
  methods: {},
};
</script>

<template>
  <div v-if="loading">
    <NuxtLoadingIndicator />
    <h1>Loading...</h1>
  </div>

  <div v-else>
    {{ posts?.length ?? 0 }}
    <ul>
      <post-list-item :posts="posts"></post-list-item>
    </ul>
  </div>
</template>