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

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

前提条件

• Nuxt.jsがインストールされていること

使い方

ファイルの作成

mkdirコマンドとtouchコマンドでmeta.jsファイル、meta.jsonファイルを作成

$ mkdir mixins && touch mixins/meta.js assets/meta.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テストディスクリプション"
  }
]

nuxt.config.js

const metaData = require('./assets/meta.json')

module.exports = {
  env: {
    metaData
  }
}

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

*.vue

import metaMixin from '~/mixins/meta'

export default {
  mixins: [metaMixin]
}

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

出力結果

/ページ

<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/ページ

<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">