Content: $content.fetch() inside a component

[mathieunicolas]

Hello,

I'm quite lost and I need some help to understand why my code doesn't work.
I'm dev a very simple website with markdown files inside the contentfolder. In the root index.vue, I've been able to get the list of the markdown files, and building a menu in the navbar.

Wrapping up this in Vue style, I then created a component inside the components folder, and moved the <script> with asyncData getting the files via $content('', { deep: true}).fetch()
It didn't work. I remembered asyncData cannot be used inside a component, so I used :

(I'm in a component inside the components folder, and this component is displayed in a layout)

export default {
  data() {
    return { articles: {} };
  },
  async fetch(context) {
    this.articles = await context.$content("", { deep: true }).fetch();
  }
};

I just can't figure out why it doesn't work : the articles is still empty.
I tried with and without context, I tried with this.$content... I'm clueless now.

My point is to make a static generated website.

Thanks a lot for your help, I just spent like 5 hours on this thing /o\

edit: actually it looks like fetch doesn't exist.
When I try to display fetchState, or when I put Property or method "$fetch" is not defined on the instance but referenced during render. based on the fetch examples I got some errors telling me the objects doesn't exist.

[Atinux]

You need to use this.$content with fetch() (without argument)

Read more on https://nuxtjs.org/api/pages-fetch/

[mathieunicolas]

Thanks for your answer, it's one of the things I've tried during these hours...

export default {
  async fetch() {
    this.articles = await this.$content("", { deep: true }).fetch();
  },
  data() {
    return { articles: null };
  }
};

Doesn't return any error, but the articles var is still null.

[mathieunicolas]

I'm not in the good repo... I'm sorry, I think I should ask on the nuxt.js issues, since it seems the problem comes from the async fetch() hook

[mathieunicolas]

It looks like async fetch() doesn't get activated when in a layout or in a component.
I just can't understand why, since it's supposed to be one of the big advantages on asyncData =(

A simple :

async fetch() {
console.log("hello")
}

Works great in the root index.vue, and is not event triggered when inside a component or a layout !

[Atinux]

Please create a reproduction with https://template.nuxtjs.org so we can help you.

[mathieunicolas]

the sandbox makes my computer freezing, I'll try again soon, but the reproduction is easy :
1/ clean install nuxtJS, universal mode, v2.12.2
2/ Try using async fetch in a "page" : it works
3/ try using it in a layout or in a vue component (in the folder components : it doesn't work. I mean, if I put a simple console.log in the component and in the layout, nothing appears in the console, and if I do that in a "page", the message appears in the console.

Despite what's written in the documentation, I'm not able to use async fetch in a component or in a layout.

[mathieunicolas]

Damn. One whole night spent on such a silly mistake.
The package.json installed the good 2.12.x package, BUT I made a global install of nuxt few months ago, when I discovered the framework.
This global package was still in 2.10.x so it couldn't handle the "new fetch".

npm install -g nuxt solved all my problems.