Nuxt の初期設定や使ってる便利プラグイン一覧

なんで Nuxt.js

Webのフロントエンド開発で一番キライだったものが開発環境構築です。
Pug、Scss、CoffeeScript、TypeScript、を使いたいがために、gulpやwebpackを駆使して自分のために何時間もかけて開発環境を構築してました。
それに加えて環境の保守もあるわけです、バージョンどんどん上がっていくわけです。
そして案件が途中からチーム開発になったり、誰かに引き継ぐとき・・・
オレオレ環境になっているのですごく申し訳ない。

ちがう、こんなことがしたいんじゃない。
コードを書いてプレビューしたいだけなのに、別のことに多くの時間が割かれていく・・・。
バニラJSや HTML/CSS そのまま書けよ言われたら終わりですが。

ライブラリ入れる必要ないんじゃない？

Vue.js や React でもいいんじゃない？
と思われるかもしまれんが、私が思う Nuxt.js の一番の利点が静的HTMLファイルを生成できることだと思っています。

静的HTMLファイルになると何がいいかといわれると、私は一番に

ページ毎に meta ogp 設定できる(サーバーサイドレンダリング使わずに）

だと答えます。
これ結構クライアントからの要望多かったりするのですごく助かります。
サーバーサイドレンダリング使ったら SPA でも確かにできるのですが、そこまでのコストをかけて個別に設定するのって面倒ですよね。
ディレクトリ毎にHTMLあったら解決するんですよ。めっちゃ便利！

Nuxt.js ではじめにやってる設定

個々から本題の私がNuxt入れたらやっていることと、プラグイン一覧です。
Nuxtの導入は公式ドキュメントに従って create-nuxt-app で入れています。

まだまだ必須なIE11対応

必要なNPMパッケージをインストール・・・しなくてOK
すごくうれしい！
package.jsonにbrowserslistを記載

package.json

{
"browserslist": [
  "last 2 version",
  "android >= 4.4",
  "IE 11"
]
}

nuxt.config.jsにpostCSSの設定をする

nuxt.config.js

export default {
  build: {
    postcss: {
      plugins: {
        'postcss-preset-env': {
          autoprefixer: {grid: true} 
        }
      }
    }
  }
}

だいたい入れてるプラグイン

・画像圧縮してくれる
nuxt-imagemin

・変数、ミックスイン、関数を共有
@nuxtjs/style-resources

・サイトマップ自動で作成
@nuxtjs/sitemap

・Googleタグマネージャー使うとき
@nuxtjs/google-tag-manager

・Googleアナリティクス使うとき
@nuxtjs/google-analytics

・GoogleMapをカスタムするとき
nuxt-google-maps-module

・UA判断してくれる
nuxt-user-agent

・画面幅を元にした切り替えに便利
nuxt-mq

便利系

・スライダー
vue-awesome-swiper

・アニメーション
animejs

・PWA作成してくれる
@nuxtjs/pwa