Nuxt•2y ago

How to fetch data only when I build the website

Hello ! 👋 I'm migrating to Nuxt 3 and I would like to deploy my website with Netlify. But I would like to fetch some data and that it be built without making HTTP requests to the relevant API on the client side. At this moment, and under Nuxt 2, he works like :

export default {
  name: 'github_repos',
  async fetch() {
    this.allRepos = await fetch(
      `https://api.github.com/users/thomasbnt/repos`, {
        headers: {
          'accept': 'application/vnd.github+json',
          'content-type': 'application/json',
          'Authorization': process.env.GITHUB_TOKEN
        }
      })
      .then(async res => {
        this.git = await res.json()
      })
      .catch(err => err)
  },
  data() {
    return {
      git
    }
  }

export default {
  name: 'github_repos',
  async fetch() {
    this.allRepos = await fetch(
      `https://api.github.com/users/thomasbnt/repos`, {
        headers: {
          'accept': 'application/vnd.github+json',
          'content-type': 'application/json',
          'Authorization': process.env.GITHUB_TOKEN
        }
      })
      .then(async res => {
        this.git = await res.json()
      })
      .catch(err => err)
  },
  data() {
    return {
      git
    }
  }

How I can recreate that under Nuxt 3 to avoid useless HTTP request on Client side ?

2 Replies

manniL•2y ago

Use useFetch composable and nuxi generate

Thomas BntOP•2y ago

Oh, I just seen my package.json uses nuxt build on Netlify. 👀

Gaming

Programming

How to fetch data only when I build the website