0

We work a lot with Vuejs as Single Page Application (SPA). Vue meets many requirements is very popular.

In terms of SEO and social media links has faced some challenges. We also want to upscale applications and have therefore shortlisted Nuxt. Specifically, the Static Page Generation feature.

The approach is to host the pages in an S3 or GitHub Pages SEO friendly.

Is there any way we can embed Vuejs on Nuxt statically generated pages to make REST API calls such as for product searches and their results? The point is to get a dynamic for non possible static generated pages. For example, for product searches, etc. I'm talking about a mixture of static pre generated pages on which dynamic Vuejs content can be executed.

BTW: We are not talking about generating dynamic routes.

Ben Asmussen
  • 964
  • 11
  • 15

1 Answers1

0

of course you can. Especially with last versions of Nuxt (v2.12) they modify the fetch() hook in order to retrieve async data from api on page load, or triggered by an event:

  export default {
    async fetch() {
      try{
        const query = await this.$prismic.api.query(this.$prismic.predicates.at('document.type','product'))
        this.docs = query.results
      }   
      catch (e) {
        console.log(e)
      }
    }, fetchDelay: 500,

    data(){
      return{
        docs: []
      }
    }
  }

In this example i am retrieving data from Prismic API.

Then, in your template, you can use sweet methods like <button @click="$fetch"> to trigger the calls or $fetchState.pending to check if the calls you are making are completed.

More here: https://nuxtjs.org/api/pages-fetch/

sintj
  • 804
  • 2
  • 11
  • 23
  • For static hosting, the fetch hook is only called during page generation, and the result is then cached for use on the client. Are you sure this works for dynamic content? – DaDo Aug 18 '21 at 21:04
  • You can add an option like fetchDelay that is: ```fetchOnServer: false```, this way the content won't be fetched during generation but on page loaded. – sintj Aug 19 '21 at 22:15