Question: I am looking for ways to refactor this:

**nuxt.config.js**

```
const headConfig = require('./config/head')
const modulesConfig = require('./config/modules')

const config = {
  head: headConfig,

(...)
}

module.exports = Object.assign({}, config, modulesConfig)

```

**config/head.js**

```
module.exports = {
  meta: [
    {charset: 'utf-8'},
    {name: 'viewport', content: 'width=device-width, initial-scale=1'},
    {name: 'fb:app_id', content: 'xxxx'},
    {hid: 'og:url', name: 'og:url', content: 'xxxx'},
    {hid: 'og:type', name: 'og:type', content: 'website'},
    {hid: 'og:image', name: 'og:image', content: 'xxxx'},
    {hid: 'og:site_name', name: 'og:site_name', content: 'xxxx'},
    {hid: 'keywords', name: 'keywords', content: 'xxxx'}
]
}

```

An example of what I'd like to be able to do is to automatically set the 'og:url' to the url of the page. There is no need to repeat that every time.

At the moment I include this in each page of my Nuxt.js app:

```
    {
      hid: 'og:url',
      property: 'og:url',
      content: 'https://website.com' + this.$route.fullPath
    },

```

I am sure there is a better way to automatically set that somewhere :/

Answer: 
Probably your best bet would be to create a global [Mixin](https://v2.vuejs.org/v2/guide/mixins.html#Global-Mixin):

**<https://v2.vuejs.org/v2/guide/mixins.html#Global-Mixin>**

This should allow you to create a head mixin that will be auto-imported into every component, so you could define that `og:url` once and have it auto-injected everywhere.

Here's an example of how you'd register it as a plugin with Nuxt:

**/plugins/headMixin.js**

```
import Vue from 'vue'

export default ({ route }) => {
  Vue.mixin({
    head() {
      return {
        meta: [
          {
            hid: `og:url`,
            property: 'og:url',
            content: 'https://www.yoursite.com' + route.fullPath
          }
        ]
      }
    }
  })
}

```

in **nuxt.config.js**:

```
plugins: [
    '~/plugins/headMixin.js'
]

```
this is my way

**in nuxt.config.js:**

```
head: {
title: 'default title',
meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  {
    hid: 'description',
    name: 'description',
    content: 'default description'
  }
],
link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]

```

},

**in default.vue**

```
export default {
head() {
  return {
    title: `Company - ${this.$route.meta.title}`,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: this.$route.meta.description
      }
    ],
  }
},

```

**and if you use @nuxtjs/router in router.js**

```
routes: [      
{
  path: '/page',
  name: 'some',
  meta: {            
    title: 'Best seo title',
    description: 'Best seo description'
  },
  component: someComponent,
},

```

All the data you write in routes. Everything works perfectly.