title: Vue/Nuxt async meta tags generation
body: <p>We have a webpage built with vue.js and nuxt. We use <code>nuxt generate</code> to generate static html files, which also should contain the SEO and og tags.
  That's why we use <a href="https://nuxtjs.org/api/configuration-head/" rel="noreferrer">nuxt's <code>head ()</code></a>to generate the meta info.</p>
  
  <p>So far so good.
  But now we have a page that asynchronously loads a post into a <a href="https://nuxtjs.org/examples/nested-routes/" rel="noreferrer">nested route</a>. If you go to that page, it loads the post's data via ajax call. Then it would use the post's meta to populate the <code>&lt;head&gt;</code>.</p>
  
  <p>The meta information is updated correctly after some time (after the post is loaded) BUT when we use <code>nuxt generate</code> the post's data and therefore it's meta info is not present at the time when we generate the meta information with <code>head ()</code>.</p>
  
  <p>That's why our static html does not contain the necessary meta info.
  What would be possible solutions for this?
  Ideal would be that the generation process waits for the post to be loaded. Could it be solved with promises? Or are there some other ideas?</p>
  
  <p>Here <code>this.post</code> is set to false first.
  our helper function generateMetaInfo is called but obviously does not have the correct data.</p>
  
  <pre><code>head () {
    this.log('this.post: ', this.post)
    if (this.post) {
     return generateMetaInfo(this.post)
    }
  }
  </code></pre>
  
  <p>We load the post like this, when calling the url:</p>
  
  <pre><code>getPost () {
    // Only if postSlug is present
    if (this.$route.params.postSlug) {
      // If postslug &gt; try to get it from store
      if (this.getCompletePostBySlug(this.$route.params.postSlug)) {
        this.activePost = this.getCompletePostBySlug(this.$route.params.postSlug)
      }
      // if it is not in store get it via axios
      else {
        const ax = axios.create({
          baseURL: `${window.location.origin}/${this._checkRouteByString('programm') ? 'events' : 'posts'}`
        })
        ax.get(`posts.${this.$i18n.locale}.${this.$route.params.postSlug}.json`)
        .then((response) =&gt; {
          const newActivePost = response.data &amp;&amp; response.data.items ? response.data.items.find(p =&gt; p.slug === this.$route.params.postSlug) : false
          if (newActivePost) {
            this.post = newActivePost
            this.$store.dispatch('data/saveCompletePosts', this.activePost)
          } else {
            this.post = '404'
          }
        })
        .catch((error) =&gt; {
          // console.log(error.response)
        })
      }
    } else {
      this.setActivePost()
    }
  },
  </code></pre>
  
  <p>So we would have to wait for the ajax call to be finished.</p>
  
  <p>Any idea that could help us find a solution is very much appreciated.</p>
  
  <p>Cheers</p>
  
  <p>============================</p>
  
  <p>EDIT:</p>
  
  <p>Using a promise did not work either:</p>
  
  <pre><code>methods: {
    getPostMeta: async function () {
      let promise = new Promise((resolve, reject) =&gt; {
        setTimeout(() =&gt; {
          const result = {
            title: 'Promise Title Test',
            meta: [
              { charset: 'utf-8' },
              { name: 'viewport', content: 'width=device-width, initial-scale=1' },
              { name: 'keywords', content: 'keyword 1, keyword 2'},
              { hid: 'description', name: 'description', content: 'PROMISE. This is the generic promise descr.'}
            ]
          }
          resolve(result)
        }, 1000)
      })
  
      let result = await promise
      console.log('result: ', result)
  
      return result
    }
  },
  head () {
    return this.getPostMeta()
  }
  </code></pre>
  
  <p>This would not wait until the promise is resolved... :(
  (of course this was only an example with a timeout, in the real world this would have to be exchanged with an ajax call, getting the post's data)</p>