Nuxtを導入するにあたって今度のためにテンプレートが欲しかったので作っておく。

利用環境

Docker

フロントエンドとバックエンドを分離した構造にしている。これによりフロントエンド とバックエンドを柔軟に変更することができる。

Dockerfile

# イメージ指定
FROM node:12.13.0-alpine

WORKDIR /app

# コマンド実行
RUN apk update && \
    apk add git && \
    npm install -g @vue/cli nuxt create-nuxt-app

EXPOSE 5000

docker-compose.yml

version: '3'
services:
  nuxt:
    build: .
    stdin_open: true
    tty: true
    volumes:
      - ./:/app:delegated
    ports:
      - 5000:5000
      - 9001:9001
    environment:
      - HOST=0.0.0.0
      # Docker用にpollingの設定。ファイルを書き換えた時のブラウザ自動更新を有効化
      - CHOKIDAR_USEPOLLING=true
    command: yarn run dev

導入

TypeScript

[Nuxt + Typescriptのセットアップ]()

OpenAPI / swagger / API MOCK Server

OpenAPIやswaggerを使ってAPIの設計書を作成する場合にdocker-compose.ymlを修正する。

OpenAPI + Docker + Nuxt + TypeScriptで快適な開発環境を

開発環境整備

commitlint

commitlintはcommit メッセージを解析して形式が違ったらcommitさせないようにするやつです。個人ではなくてもいいと思うのですが、チーム開発する際にはコミットメッセージの統一は必要になってくるので、一応入れてあります。

$ npm i -D husky @commitlint/cli @commitlint/config-conventional

package.json

{
  ...
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

ESLint / Stylelint / Prettier

Nuxt + TypeScript に Stylelint + ESLint + Prettier を導入

テスト

Nuxt のテストの実行環境を整える

その他

コンポーネントカタログを作成する場合

Storybookを導入しようと思ったが、Nuxtと相性が悪く、導入を諦めた経緯がある。

なので、Storybookのようなコンポーネントカタログを導入する場合は、以下のような方法をとる。

Nuxt + TypeScript + DockerのプロジェクトでStorybookの代わりを考える

composition API

vue3でデフォルトの機能となるcomposition APIを2系で使用するにはcomposition APIのライブラリをインストールして使用する必要がある。

$ npm install @vue/composition-api
# or
$ yarn add @vue/composition-api

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

行動ログ

Logrocketを使うとユーザーの行動ログをとることができます。

NuxtコミュニティでLogrocketのライブラリのサポートもしています。

LogRocketをNuxtで使ってみる！

エラーログ

Sentryを使うとエラーログの詳細を簡単に見ることができます。

Sentryののライブラリ