1

I've got a vue.js application in which I need to await a call to the Prismic API. The problem is the call starts from the created hook, but I don't know how to tell vue to await the hook.

The code is like this:

...
async created() { 
  await this.getContent();
}, 
methods : {
  async getContent () {
    let document = null;
    try {
      document = await this.$prismic.client.getSingle(...);
    } catch(err) {
      return;
    }

    // add content to meta tags
  },
  ....

As you can see, I'm awaiting the call to this.$prismic.client.getSingle(...) before setting the content in the meta tags (which works fine), but because this requires the getContent() method to be async, I need to also await the call to this.getContent() in the created() hook... which means I need to make the created() hook async. At this point, I'm at the mercy of Vue. I don't know how to tell it to await the call to created().

This is important because we're trying to get the google search crawler to read our meta tags. We're getting inconsistent results. In the Google Search Console, it sometimes finds the tags, sometimes not. We're trying to see if an async/await structure to our code will help. That way, the crawler will wait for the javascript to finish executing before looking for the tags (or so we expect). But if we can't await the call to created(), there's no point in awaiting the other method calls.

Is there a way to deal with this problem? Thanks.

EDIT: The question at Is `async/await` available in Vue.js `mounted`? is exactly the same as mine but the solution doesn't apply. The solution there is to control the rendering of a component with v-if="flag" where flag is set at the end of the async method. In my case, I'm at the mercy of the google crawler which I can't control.

Gibran Shah
  • 871
  • 3
  • 15
  • 34
  • Does this answer your question? [Is \`async/await\` available in Vue.js \`mounted\`?](https://stackoverflow.com/questions/53513538/is-async-await-available-in-vue-js-mounted) – Estus Flask Jan 15 '20 at 17:06
  • *That way, the crawler will wait for the javascript to finish executing before looking for the tags (or so we expect)* - setting metas asynchronously is a separate question, probably better be asked https://webmasters.stackexchange.com/ and not tied to Vue or any specific implementation. – Estus Flask Jan 15 '20 at 17:07
  • The problem at that link is the same but the solution doesn't apply in my case. The solution there is to control the rendering of a component with v-if and a flag set after the async method is done. In my case, I'm at the mercy of the google crawler. I have no control over that. – Gibran Shah Jan 15 '20 at 23:17
  • This is the only way it's possible in Vue. You can't wait for created hook to complete. And even if you could, this doesn't affect your situation because promises don't block the page and the crawler still has to wait patiently until async operations are completed on the page. That's why I mentioned that you need to address the issue with crawler separately. – Estus Flask Jan 16 '20 at 07:32
  • Ok, thanks for the insight Estus. I'll take this over to stackexchange. – Gibran Shah Jan 16 '20 at 17:15

1 Answers1

0

Assuming this.$prismic.client.getSingle(...) returns a promise, you could do something like this:

created() { 
  this.getContent();
}, 
methods: {
  getContent() {
    this.$prismic.client.getSingle(...)
      .then((response) => {
        // add content to meta tags
      })
      .catch((err) => {
        // error
      });
  }
}
Marc Barbeau
  • 826
  • 10
  • 21