Nuxt.jsでmixinを使ってmetaを設定する方法

Nuxt.jsでmixinを使ってmetaを設定する方法をまとめました。

# 前提条件
- Nuxt.jsがインストールされていること

# 使い方
## ファイルの作成
`mkdir`コマンドと`touch`コマンドで`meta.js`ファイル、`meta.json`ファイルを作成

```shell
$ mkdir mixins && touch mixins/meta.js assets/meta.json
```

## 設定

```json:meta.json
[
  {
    "url": "/",
    "title": "タイトル",
    "site_name": "サイトネーム",
    "description": "ディスクリプション",
    "og_title": "ogタイトル",
    "og_description": "ogディスクリプション"
  },
  {
    "url": "/test/",
    "title": "テストページ",
    "site_name": "サイトネーム",
    "description": "テストディスクリプション",
    "og_title": "ogテストタイトル",
    "og_description": "ogテストディスクリプション"
  }
]
```

```javascript:nuxt.config.js
const metaData = require('./assets/meta.json')

module.exports = {
  env: {
    metaData
  }
}
```

```javascript:meta.js
const metaMixin = {
  asyncData({ env, route }) {
    const path = route.path.split('')
    let route_path = route.path
    if(path[path.length - 1] !== '/') route_path = `${route_path}/`
    const meta = env.metaData.find(meta => meta.url === route_path)
    return { meta: meta }
  },
  head() {
    return {
      title: `${this.meta.title} | ${this.meta.site_name}`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: `${this.meta.description}`
        },
        {
          hid: 'og:title',
          property: 'og:title',
          content: `${this.meta.og_title}`
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: `${this.meta.og_description}`
        },
        {
          hid: 'og:url',
          property: 'og:url',
          content: `https://test.com${this.meta.url}`
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: 'https://test.com/assets/img/og/img.png'
        },
        {
          hid: 'twitter:card',
          name: 'twitter:card',
          content: 'summary_large_image'
        }
      ]
    }
  }
}

export default metaMixin
```

```javascript:*.vue
import metaMixin from '~/mixins/meta'

export default {
  mixins: [metaMixin]
}
```

`mixin`は`page`コンポーネントで読み込む必要があります。

## 出力結果

`/`ページ

```html
<title>タイトル | サイトネーム</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="ディスクリプション">
<meta data-n-head="ssr" data-hid="og:title" property="og:title" content="ogタイトル">
<meta data-n-head="ssr" data-hid="og:description" property="og:description" content="ogディスクリプション">
<meta data-n-head="ssr" data-hid="og:url" property="og:url" content="https://test.com/">
<meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://test.com/assets/img/og/img.png">
<meta data-n-head="ssr" data-hid="twitter:card" name="twitter:card" content="summary_large_image">
```

`/test/`ページ

```html
<title>テストページ | サイトネーム</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="テストディスクリプション">
<meta data-n-head="ssr" data-hid="og:title" property="og:title" content="ogテストタイトル">
<meta data-n-head="ssr" data-hid="og:description" property="og:description" content="ogテストディスクリプション">
<meta data-n-head="ssr" data-hid="og:url" property="og:url" content="https://test.com/test/">
<meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://test.com/assets/img/og/img.png">
<meta data-n-head="ssr" data-hid="twitter:card" name="twitter:card" content="summary_large_image">
```