How to prerender content with Nuxt Js from own Api?

Question

I have a Vuex store

/store/articles.js

export const state = () => ({
  article:'',
})
export const mutations = {
  setArticle(state, payload) {
    state.article= payload.data;
  }
}
export const actions = {
  async getArticle ({ commit }, id) {
    try {
      const { data } = await axios.post('http://test.local/api/getArticle',id);
      commit('setArticle', { data })
    } catch (e) {
      console.log(e);
    }
  }
}

my API returns a JSON like example this

{
  "id": 1,
  "title": "some title",
  "content": "some content",
  "image": "article_img1.jpg"
}

there is my page and content from API

/pages/article/slug.vue

<template>
  <div> 
    <h4>{{ article.title }}</h4>
    <img :src="'/images/'+article.image" />
  <div v-html="article.content" />
  </div>
</template>

<script>
export default {
  computed:{
      article(){
        return this.$store.dispatch('getArticle',1)
      },
  },
}
</script>

Content appears fine, but when I look at the content page code, there is no content. How to make the content prerendered, on this way?

And how to generate static pages from an API, do I need to use @nuxt/content ? I am trying this, but it looks like works only from .md or .json files, I don't understand how to generate automatically with some API fetching.

score 1 · Answer 1 · answered Jul 21 '21 at 10:12

You can totally generate pages from an API without the need of nuxt/content. I have written an in-depth answer here: Rewriting to a 404 page doesn't work if the page doesn't exist on a site created with SSG in Nuxt.js

Showing how to achieve a clean generation of your pages during build time.
Otherwise, you can also follow the steps described into the documentation here: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate#function-which-returns-a-promise

Also, be sure to have ssr set to true in your nuxt.config.js file.

score 1 · Answer 2 · edited Jul 21 '21 at 12:35

1

Use the nuxt asyncData hook for that.

<template>
  <div> 
    <h4>{{ article.title }}</h4>
    <img :src="'/images/'+article.image" />
  <div v-html="article.content" />
  </div>
</template>

<script>
export default {
  computed: {
      articles() {
          return this.$store.state.article
      }
  },
  async asyncData() {
      await this.$store.dispatch('getArticle',1)
  },
}
</script>

This will make nuxt wait on the server for the promise to resolve.

edited Jul 21 '21 at 12:35

kissu

40,416
14
65
133

answered Jul 21 '21 at 10:20

Borjante

9,767
6
35
61

This will not prerender it ahead of time. – kissu Jul 21 '21 at 11:33
1

async asyncData({params, store}) { articles: await store.dispatch('articles/articlesById', {'id': params.id, return {articles}; }, this works – Cdevelop Jul 25 '21 at 13:20
Yes that depends on implementation. Feel free to "edit" my answer and accept if it helped – Borjante Jul 25 '21 at 20:40

score 0 · Accepted Answer · answered Jul 25 '21 at 13:22

0

async asyncData({params, store}) {
      articles: await store.dispatch('articles/articlesById', {'id': params.id, 
      return {articles};
    },

this works

and i make ssr true in config

answered Jul 25 '21 at 13:22

Cdevelop

65
5

How to prerender content with Nuxt Js from own Api?

3 Answers3