$content.fetch() inside a component

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.

[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.

[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.