事前準備

npmをインストールしておきましょう。

create-nuxt-appをグローバルにインストール

npm i -g create-nuxt-appを実行する。

create-nuxt-appでプロジェクト作成

create-nuxt-app your-project-nameで実行（your-project-nameは各自設定）。

設定した内容はこんな感じ。

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in your-project-name
? Project name:your-project-name
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios, Progressive Web App (PWA)
? Linting tools: ESLint, Prettier, StyleLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: Semantic Pull Requests, Dependabot (For auto-updating dependencies, GitHub only)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? your-github-name

自分はTypesctiptを使ってPWAのSPAを作りたかったのでこのようにしました。 GIthubも使うつもりなので便利なものはぽいぽいと入れてしまいました。

stylelintの設定

無事プロジェクトが出来上がったら、stylelint.config.jsを編集します。

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
    'stylelint-config-recommended-scss',
    'stylelint-prettier/recommended',
  ],
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  rules: {
    indentation: 2,
    'string-quotes': 'double',
  },
}

extendsに記載のモジュールはnpmでインストールしましょう。

eslintの設定

コーディングスタイルにAirbnbのものを採用するようにしました。 npmのコマンドは以下です。

npm i -D @vue/cli-service @vue/eslint-config-airbnb eslint-import-resolver-alias

実際の.eslintrc,jsはこんな感じ。 prettierより前にairbnbのコーディングスタイルは持ってくる必要があるそうだ。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    '@vue/airbnb',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
    'prettier',
    'prettier/vue',
  ],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {
    'prettier/prettier': 'error',
  },
}

prettierの設定もこのタイミングで少し変えているので参考までに載せます。

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

サンプルソースの修正

ここまでやって試しにnpm run lint:js && npm run lint:styleを実行するとぽろぽろとエラーが出ると思うので、ESLintの案内通りに修正してください。

package.jsonの編集

追加でdependenciesにtypescriptとvuetifyを追加した。 vuetifyがnuxtで入れたはずだけど、ESLintがうるさいから入れた。要らないのかもしれない（ESLintのエラーをコメントいれて無視させればいい？）。

heroku向け設定

Dev Centerの内容を見ればわかるけども、新しくenginesを設けてnode.jsのバージョンを指定する必要がある。

また、Typescriptをbuildしなければならないけど、Slug Sizeを削減したかったので、devDependenciesにあった@nuxt/typescript-build、@nuxtjs/stylelint-module、@nuxtjs/vuetifyをdependenciesに移動した。

{
  "name": "your-project-name",
  "version": "1.0.0",
  "private": true,
  "engines": {
    "node": "15.x"
  },
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.0",
    "@nuxtjs/axios": "^5.12.2",
    "@nuxtjs/pwa": "^3.0.2",
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6",
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "typescript": "^4.1.3",
    "vuetify": "^2.4.0"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.6",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-config-typescript": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@vue/cli-service": "^4.5.9",
    "@vue/eslint-config-airbnb": "^5.3.0",
    "@vue/test-utils": "^1.1.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.5.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "jest": "^26.5.0",
    "prettier": "^2.2.1",
    "stylelint": "^13.7.2",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-recess-order": "^2.3.0",
    "stylelint-config-recommended-scss": "^4.2.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-prettier": "^1.1.2",
    "stylelint-scss": "^3.18.0",
    "ts-jest": "^26.4.1",
    "vue-jest": "^3.0.4"
  }
}

dependabotさんを導入している為、create-nuxt-appで既定になっているバージョンから上げているものが幾つかある。実際にGithubにPushすればPull Requestが来るので適宜ご対応ください。

heroku環境の用意

これもDev Center見れば書いていることをそのままやっただけなのだけど、buildpackにnode.js、環境変数に以下の二つを設定した。

HOST
- 0.0.0.0
NODE_ENV
- production

あとはGithubと連携させてbuildするだけ。

最後に

昼からトライアンドエラーを繰り返していたので、抜け漏れがあるかもしれない。でも、一番困ったところは欠かさずに書いたので、これ読んでる人はきっと自力で直してくれると思う。もし気が向いたらコメントください。

カタベログ

IT技術に関するブログを書きたい．食べ物関連はInstagramをご参照の事．

create-nuxt-appを使って作ったサンプルをHerokuで動かすまでの話