@nuxtjs/google-analytics

Nuxt.jsでGoogleアナリティクスが使えるようにするモジュールです。

Webサイト運営しててアナリティクス不要なんて人はおそらくいないでしょうから必須枠へ。

使い方はインストール↓。

$ npm install --save-dev @nuxtjs/google-analytics

nuxt.config.jsに追加↓。

export default {
  buildModules: [
    ['@nuxtjs/google-analytics', { id: 'UA-XXXXXXXXX-X' }],
  ]
}

設定部分を切り分ける場合はこう↓。

export default {
  buildModules: [
    '@nuxtjs/google-analytics'
  ],
  googleAnalytics: {
    id: 'UA-XXXXXXXXX-X'
  }
}

たったこれだけでPVのトラッキングができます。 イベントのトラッキングなどはアナリティクスと同様のやりかたでできます。

@nuxtjs/sitemap

サイトマップを自動生成するモジュールです。

以前「小規模サイトでは別にサイトマップなくてもいいよ」みたいなGoogleの発言を見たような気がするので、いらないのかもしれないですが一応ね…？

使い方はインストール↓。

$ npm install @nuxtjs/sitemap

nuxt.config.jsに追加↓。

export default {
  modules: [
    '@nuxtjs/sitemap',
  ]
}

設定部分を追加する場合はこう↓。

export default {
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    // options
  },
}

オプションは公式で詳しく解説されています。 個人的に使っているのは次の3つです。

//トップページのURL(末尾スラッシュなし)
hostname: 'https://XXXXXXXXX.com',

//各ページのURL末尾にスラッシュをつけるかどうか
trailingSlash: true,

//除外するURL(以下の例だと/test/以下全て)
exclude: [
  '/test/**',
],

@nuxtjs/style-resources

SASS/SCSSなんかを使う時の変数を全ページで流用できるようにするモジュールです。

Nuxt.js(というかVue.js？)はページやコンポーネント、レイアウトなどでCSSを分けて管理することができます。
(分けて、と言っても思った通りには分けれてくれてなかったんですが…)

普通に変数を定義するとそのファイル内でしか変数を参照できないので、テキストやメインの色、レスポンシブのブレイクポイントなど、ファイルごとに定義しないといけません。 これはあまりに非効率……というか、そもそも変数として定義する意味がありません。

そこで、別途変数用のファイルで変数を定義して、全ファイルで使い回せるようにするのがこのモジュールです。

僕はSCSSは必須だと思ってるので、必然的にこのモジュールも必須としました。

使い方はインストール↓。

$ npm install @nuxtjs/style-resources

nuxt.config.jsに追加↓。

  buildModules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: [
      './assets/vars/_var.scss',
    ],
  },

SCSSの部分は自分が必要なものに合わせて、sass/less/stylusが使えるようです。 ファイル名の部分は自分の環境に合わせてください。

これで全ページで変数が使い回せるようになります。

cheerio

Node.js？用のスクレイピングモジュールです。

スクレイピングというのはHTML全体を取得してタグの操作をしたりする機能…で合ってるのかな…。

なんでそんなものを必須にしたかというとですね、Nuxt.jsが追加する「data-n-head」などの属性を削除するためです。

と思いますが、なんとなく気持ち良くないという理由の他に、これがあるとOGPタグがちゃんと認識されていないっぽいんですよね。

OGPはSNSにリンクが貼られた場合の設定なので、せっかくならちゃんと機能してほしいです。 というわけで個人的には必須としました。

使い方はインストール↓。

$ npm install cheerio

cheerioはNuxt.js専用のモジュールではないせいか、nuxt.config.jsに追加はしません。 使う際には以下↓のような格好。

export default {
  hooks: {
    generate: {
      page (page) {
        const cheerio = require('cheerio')
        const $ = cheerio.load(page.html, { decodeEntities: false })
      },
    },
}

詳しくは「data-n-head」削除の記事で書いたのでそちらを見てください。

node-sass / sass-loader

Nuxt.jsでSASS/SCSSを使えるようにするモジュールです。

一度SASS/SCSSを経験するとCSSベタ書きなんてやってられないので必須です。

使い方はNuxt.js公式に習ってインストール↓。

$ npm install --save-dev node-sass sass-loader

2つのモジュールが必要らしく、一度に2つともインストールしています。

後はCSSを書く場所で以下のように記述するだけです。

//Vueファイル内
<style lang="scss">
</style>

//nuxt.config.jsのグローバルCSS
css: [
  { src: '~/assets/css/common.scss', lang: 'scss' },
],

postcss-loader

Nuxt.jsでPostCSSを使えるようにするモジュールです。

とは言ったものの僕はPostCSSがなんなのかよく分かっていなくてですね…。 その中の「autoprefixer」という機能目当てで使っています。

autoprefixerというのはベンダープレフィックスを自動追加してくれる機能で、次のようなCSSを書くと、

.flex {
  display: flex;
}

この↓ように補完してくれます。

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

手動ではやってられないかなーと思うので必須にしました。

使い方はインストール↓。

$ npm i --save-dev postcss-loader

nuxt.config.jsでの設定は…なんかめっちゃいろいろ出来そうなんですよね…。 僕はPostCSSの理解が浅いのでNuxt.js公式の説明を見てください。

僕のようにautoprefixerを有効にするだけならこんな↓感じでよさそう。

export default {
  build: {
    postcss: {
      preset: {
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

ただ、これ、「autoprefixerを有効」にしているんじゃなくて、元々autoprefixerが有効なところに「gridの設定を有効」にしているだけなんじゃないのかと思うんですよね。 僕はgridもautoprefixしてほしいのでこのまま真似ています。