# nuxtjs のページごと head の title description 変更

nuxtjs はvue-meta (opens new window)使っています。
なので、nuxtjs の meta 類操作は vue-meta のマニュアルみたら、全部わかります。
ちなみにマニュアルと言ってもシンプルなもの

# nuxtjs title と meta タグの変更

<script>
export default {
  head () {
    return {
      // titleタグ変更
      title: 'This is a title',
      // titleのテンプレート変更
      titleTemplate: '%s | Hapicode',
      // metaタグ変更
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'descriptiondescriptiondescription'
        }
      ],
      // html属性変更
      htmlAttrs: {
        // lang: "ja",
        lang: this.$i18n.locale
      }
    }
  }
}
</script>

# nuxtjs の titleTemplate 多言語対応設定

nuxt.config.js

const locale = this.locale;

  head: {
    title: "Hapicode" || "",
    titleTemplate: chunk => (
        locale === 'ja'
        ? `${chunk} - ハピコード`
        : `${chunk} - Hapicode`
      )
  }

# nuxtjs 使わずに vue-meta インストール

nuxtjs 使っている場合デフォルトで入っているので、インストール必要ありません
スクラッチでなにかを作る時なら、vue-meta 入れたほうがいいでしょう。

# インストール

webpack

## npm
npm install vue-meta --save

## yarn
yarn add vue-meta

CDN

<script src="https://unpkg.com/vue-meta/dist/vue-meta.min.js"></script>

# 設定

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})
2020-04-05
  • nuxtjs

関連記事

Nuxtjs 3 に Ant design Vue を使う
Nuxtjs build WARNING in entrypoint size limit
Nuxtjs axios リクエストのヘッダー設定
Nuxtjs titleTemplate の設定
Nuxt.js でフロントエンドのカテゴリ選択
楽天 GOLD に Nuxt で作った HP デプロイ公開した話
web 開発でよく使うリダイレクトと nuxtjs redirect
localStorage is not defined に遭遇した時の対応
nuxtjs の wpa を実装した時のメモ
vuejs スクロールでナビバー表示非表示
Nuxtjs に iview 4.0 入れた動かしてみた