Nuxtでtitleタグの出力

Nuxtで<title>タグを出力するには、nuxt.config.jsに、head要素を追加する。

  head: {
    titleTemplate: '%s | ともすた',
 ...

そして、各.vueファイルでタイトルを指定する。

export default {
  head () {
    return {
      title: '記事一覧',
    }
  }
}

ともすた 2022/04/06に更新

titleのHTMLエンコードを防ぐ方法

タイトルは標準でHTMLがエンコードされてしまい、&が&になったりする。これを防ぐには、nuxt.config.jsに次の記述を追加する。

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
  ...
    __dangerouslyDisableSanitizers: [
      'title'
    ]
}

ともすた 2022/04/17に更新

v-htmlを利用するESLintでエラーが発生してしまうのを防ぐ方法

v-htmlを利用すると、ESLintでエラーが発生してしまう。このエラーを抑えるには、次のようにコメントで挟む。

<!-- eslint-disable vue/no-v-html -->
<h2 class="heading1__title1" v-html="data.title"></h2>
<!-- eslint-enable -->

1行だけの場合は、次のコメントでも大丈夫でした。

<!-- eslint-disable-next-line -->
<h2 v-html="data.title"></h2>

ともすた 2022/04/06

SVG画像をfaviconに設定する

近年のブラウザーだと、SVG形式の画像をfaviconに設定することができる。設定するには、nuxt.config.jsに次のように追加する。

head: {
    link: [
      {
        rel: 'icon',
        type: 'image/svg+xml',
        href: '/favicon.svg'
      }
    ]
}

ともすた 2022/04/06

NuxtでGoogle Tag Managerを組み込む

NuxtにGoogle Tag Manager（GTM）を組み込む場合は、公式プラグインを利用するのが簡単。まずは次のようにしてインストールする。

npm i @nuxtjs/gtm

そしたら、nuxt.config.jsでbuildModulesに加えて、

  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/gtm'
  ],

idを指定する

  // Google Tag Manager
  gtm: {
    id: 'GTM-XXXXXXXX',
    pageTracking: true
  },

これで、デプロイをすればタグが埋め込まれます。

ともすた 2022/04/12

コンポーネントの自動ロード

componentsフォルダに作成したコンポーネントを、自動で読み込むようにするには、nuxt.config.jsに次のように追記する。

components: true

ともすた 2022/04/17

nuxt.config.jsで設定を定義する

nuxt.config.jsファイルに設定を書き込んで、プログラム内で利用するにはpublicRuntimeConfigまたはprivateRuntimeConfigで設定内容を定義します。

publicRuntimeConfig: {
  key1: 'value1',
  key2: process.env.key2
},
privateRuntimeConfig: {
  key3: 'value3'
}

利用する場合は、プログラム内で$configを利用します。

$config.key1

ともすた 2022/04/17

Nuxtのプロジェクトを作る

npxなら次のコマンドで作成する

npx create-nuxt-app <project-name>