nuxtでヘッダーとメタをいじる

自分の環境

• OS
  • windows11
• node.js
  • v16.13.2
• vue.js
  • v2.15.8
• nuxt.js
  • v2.6.14
• create-nuxt-app
  • v4.0.0

ヘッダーのtitleをいじってみる

プロジェクトのルートにあるnuxt.config.jsにあるオブジェクトをいじります。
head.ttileにHello Nuxt入れるとtitleが以下のものに変更されます。
同様にmetaやcssも編集することができます。

nuxt.config.js

  head: {
    title: 'Hello Nuxt',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }