# 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 4年前

nuxtjs

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

Nuxtjs build WARNING in entrypoint size limit

Nuxtjs build で entrypoint size limit warning エラー発生...

Nuxtjs axios リクエストのヘッダー設定

Nuxtjs axios 通信毎に onRequest に header 設定したい...

Nuxtjs titleTemplate の設定

Nuxtjsのheadにtitleのtemplate使って設定する方法...

Nuxt.js でフロントエンドのカテゴリ選択

バックエンドLaravelとフロントエンドNuxtjsでカテゴリーの一覧表示と選択したら子カテゴリー...

楽天 GOLD に Nuxt で作った HP デプロイ公開した話

楽天GOLDにNuxtjs製HPデプロイ公開!楽天GOLDのFTP操作とNuxtjsで作成したページ...

web 開発でよく使うリダイレクトと nuxtjs redirect

リダイレクトコード、恒久リダイレクト一時的リダイレクトのいろいろをまとめました。...

localStorage is not defined に遭遇した時の対応

nuxtjsのssrモードでlocalStorage is not definedエラーに遭遇！...

nuxtjs の wpa を実装した時のメモ

3分でできるnuxtjs使ってwpa設定 @nuxtjs/wpaモジュール入れて設定追加して画像一枚...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

Nuxtjs に iview 4.0 入れた動かしてみた

日本には普及していない iview がバージョン 4.0 リリースしました。UI フレームワークを ...