Nuxt not rendering html for components

Question

I'm building an online shop using nuxt and nuxt generate for deploying my app on Apache.

I have created a component called ArticuloCard that represents one of my products to sell. This component has an image of the product, description, price, etc.

I use this component on my index page to show some featured products like this:

<v-layout wrap>
  <v-flex v-for="(articulo, j) in filteredArticulos" :key="j" class="md3 lg3" d-flex>
    <ArticuloCard v-bind:articulo="articulo" v-bind:dest="false"/>
  </v-flex>
</v-layout>

At this point, everything works fine when I run my app on dev mode. If I inspect the source code of the page on the browser the html is correct, it has all the href's, price, image and so on.

The problem comes when I run nuxt generate since I want the page on static for the google crawler to index the page. The resulting html for the index page does not contain any of the html mentioned above, it only shows four empty rows where ArticuloCard should be.

Because of that the google crawler can't index the entire page since there are no links to follow, it stops on the main page.

I don't know if thats the intended behavior when using nuxt generate but I guess it should render the components since it's a static site. Anyone knows hoy can I achieve this or knows any other way to print the html?

Thanks for your help and sorry for the long question.

Answer 1

Are you retrieving the filteredArticulos from an API call? If so take a look at the asyncData of NuxtJS.

Probably problem comes because you are not retrieving the data correctly in the server side.