Edit pages components in pages
directory.
I use this.$store.state.site
to store 2 information: domain
and twitter
, as vuex allow server storage/assignment of value to propagate to client.
Alternatively, you could use Nuxt Global Variables.
<script>export default { head() { return { title: this.item.title, meta: [ { hid: 'description', name: 'description', content: this.item.description }, { hid: 'og:title', name: 'og:title', content: this.item.title }, { hid: 'og:description', name: 'og:description', content: this.item.description }, { hid: 'og:url', name: 'og:url', content: this.pageUrl }, { hid: 'og:image', name: 'og:image', content: this.item.coverImage }, { hid: 'og:type', name: 'og:type', content: 'article' }, { hide: 'twitter:card', name: 'twitter:card', content: this.item.coverImage ? 'summary_large_image' : 'summary' }, { hide: 'twitter:site', name: 'twitter:site', content: this.$store.state.site.twitter } ].filter(x => x.content) } }, data() { return { item: { title: 'This is a title', descrition: 'This is a description', coverImage: 'https://code.luasoftware.com/img/logo-badge.png' } } }, computed: { pageUrl() { const domain = this.$store.state.site.domain return `https://${domain}/${this.$route.path}` } }}</script>