Nuxt.jsで開発をする場合にまずやるべきこと

概要

僕がNuxt.jsで開発をする場合にまずやることを紹介したいと思います。

インストール

僕はcreate-nuxt-appでインストールします。

npx create-nuxt-app <my-project>

入れる拡張は
1. Use a custom server framework　→ express
2. Choose features to install　→ Linter / Formatter, Prettier, Axios
3. Use a custom UI framework　→ bootstrap
4. Use a custom test framework　→ jest
5. Choose rendering mode　→ Universal

が個人的に好きです。

次にとりあえず入れとけなパッケージもインストールします。
とりあえずsassを入れます。

npm i -D node-sass sass-loader

次にsass変数をグローバルに使うためのパッケージを入れます。

npm i @nuxtjs/style-resources

Font Awesome入れます。公式のgitにnuxt用の導入方法が載っています。

npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

適当に書き換える

package.jsonにnpm scriptを一つ追加します。lintfixは絶対追加したほうがいいです、エラー内容を人力で追っていくのは時間の無駄です。
herokuにデプロイする場合はそれも追記します。

package.json

{
    // lintfixを追加
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
　　// herokuデプロイ用
    "heroku-postbuild": "npm run build"
  },
}

.eslintrc.jsにルールを追加します。よく分かってないのですがconsole.logしたら時たまエラーになるので、それの回避です。

.eslintrc.js

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }

sass変数のあれやこれやの設定はこれとこれをみたら良いですよ（宣伝）。

終わり

毎回苦労して初期設定してた気がするけど、そんな大した作業量でもなっかたです。
半年くらい前はeslintrcをゴニョゴニョ編集してた気がしますが進化してるっぽいですね。
あと最新のnuxt.js ver2.40以降はランダムにホットリロードが失敗するというちょっとムカつくバグがあるので気をつけてください。