NuxtJS - Use asyncData method in layout or component

Question

How I can use asyncData in layout or component (forbidden apparently) ?

Because my sidebar component is used in default layout, and I need to use asyncData to display data from backend. And if I use Vuex to fetch data... I don't know how I can fetch this with global on every page.

My layout component annotation:

  @Component({
    components: {
      LeftDrawer
    },
    async asyncData({ app }) {
      const latestPosts = await app.$axios.get(`/posts/latest`);

      return {
        latestPosts: latestPosts.data,
      };
    }
  })

Aldarund · Accepted Answer · 2019-10-05 10:55:04Z

9

fetch and asyncData works only for pages, as it stated in documentation. If you need something to get data on each page, use nuxtServerInit

actions: {
  async nuxtServerInit({ dispatch }) {
    await dispatch('core/load')
  }
}

answered Oct 5, 2019 at 10:55

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Sonn · Accepted Answer · 2020-07-18 07:38:19Z

6

The new fetch on Nuxt >= 2.12 now supports fetching on the layout and component level.

Right now it's slightly broken for me on the layout level for my statically generated site so I use fetchOnServer: false. By the time future people read this it'll hopefully be fixed, so feel free to edit this out.

Here's some useful reading material :)

Docs

General guide

Guide for static sites

answered Jul 18, 2020 at 7:38

Mark Sonn

8488 silver badges22 bronze badges

4 Comments

King Holly Over a year ago

I am also noticing issues with async fetch() when combined with target: "static" in my Nuxt config. fetchOnServer: false fixes my issue for some components, but when applied to others, it breaks my build...Still troubleshooting.

Mark Sonn Over a year ago

Make another Stack Overflow question and tag me, I'll see if I can see something obvious. If not, you might need to make a Github issue.

King Holly Over a year ago

Our current solution which my coworker found is to do created() { this.$fetch(); } I asked him about it and his theory is that in the server mounted() won't run until created() is done. Since we call the fetch API in the created lifecycle method, the data will be available when the mounted lifecycle method runs. The QA passed, so I am assuming this method works for our use case of fetching yaml translation files on build.

Mark Sonn Over a year ago

Glad you got it working, still worth making a Github issue so they they can either fix this or add it to the docs. Good luck with the rest of your project :)

Collectives™ on Stack Overflow

NuxtJS - Use asyncData method in layout or component

My layout component annotation:

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My layout component annotation:

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related