Home

I’m looking to include og:url and twitter:url meta tags on my pages but am having trouble passing the value from nuxt.config.js.

For example:

nuxt.config.js

module.exports = {
  env: {
    host: 'http://www.mysite.com'
  }
}

index.vue

export default {
  head () {
    return {
      meta: [
        { hid: 'og:url', property: 'og:url', content: `${process.env.host}${this.$route.fullPath}` },
        { hid: 'twitter:url', property: 'twitter:url', content: `${process.env.host}${this.$route.fullPath}` }
      ]
    }
  }
}

This results in content:"undefined/about-us" for me. The only workaround I’ve used so far is to pass the context with asyncData, but this doesn’t feel like the right solution.
index.vue

export default {
  head () {
    return {
      meta: [
        { hid: 'og:url', property: 'og:url', content: `${this.ctx.host}${this.$route.fullPath}` },
        { hid: 'twitter:url', property: 'twitter:url', content: `${this.ctx.host}${this.$route.fullPath}` }
      ]
    }
  },
  asyncData (context) {
    return {
      ctx: context.env
    }
  }
}

Is there a better way to add those meta tags I’m not thinking of? Does it require middleware?

Edit: fixed code snippet. Good spot, @qm3ster