how to use onMounted to do async things in Nuxt 3

I don't know what's wrong with this, the repository ref's value just don't get updated

I wrote async/await, but it seems not working. repository is an empty array.

I can use the api out of onMounted, so I think its something wrong about it. I don't know much about it.

Here's my code:

<template>
  <div>
    <h1>Starred Repositories</h1>
    <ul>
      <li v-for="repository in repositories" :key="repository.id">
        <h3>{{ repository.name }}</h3>
        <p>{{ repository.description }}</p>
      </li>
    </ul>
    <button @click="nextPage" :disabled="isLastPage">Next Page</button>
  </div>
</template>

<script setup>
import { Octokit } from '@octokit/core';

const repositories = ref([]);
const page = ref("1")
const runtimeConfig = useRuntimeConfig();

const octokit = new Octokit({
  auth: runtimeConfig.githubToken,
});

const nextPage = () => {
  page.value++;
}

onMounted(async () => {
  const response = await octokit.request('GET /user/starred?page=' + page.value, {
    headers: {
      'X-GitHub-Api-Version': '2022-11-28',
    },
  });
  repositories.value = response.data;
})

console.log(repositories.value);
</script>

also here's my app.vue:

<script>
import Star from './components/Star.vue'

export default {
  components: {
    Star,
    }
}
</script>

<template>
  <Star />
</template>

Your console log will execute and log an empty array because it will be executed before the code in onMounted, it is a hook and hooks don't themselves honour an async.

Move your console.log so it is inside the onMounted hook and also make sure the endpoint is infact retuning something other than an empty array it's self.

On a side note, using a life cycle hook for triggering API calls is not the best way, instead use the Top Level Await & Watch strategy.

https://nuxt.com/docs/getting-started/data-fetching#watch

In your case you are not using Nuxt's fetch helpers... so manual rigging looks like this:

<script setup>

import { Octokit } from '@octokit/core';

const repositories = ref([]);
const page = ref(1)
const runtimeConfig = useRuntimeConfig();

const octokit = new Octokit({
  auth: runtimeConfig.githubToken,
});

const nextPage = () => {
  page.value++;
}


const fetchStarredUsers = async (page) => {
  const response = await octokit.request(`GET /user/starred?page=${page}`, {
    headers: {
      'X-GitHub-Api-Version': '2022-11-28',
    },
  });

  if(Array.isArray(response?.data)) {
    repositories.value = response.data
    return
  }
  
  console.error('Invalid response, expected array of users').
}

// Call on entering component, (triggers loading suspense)
// https://nuxt.com/docs/getting-started/data-fetching#suspense
await fetchStarredUsers(page.value)

// Call on page being changed
watch(page, fetchStarredUsers)

</script>