Nuxtを導入するにあたって今度のためにテンプレートが欲しかったので作っておく。
利用環境
エディター | Nuxt |
---|---|
VSCode | 2.1.3 |
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 を導入
テスト
その他
コンポーネントカタログを作成する場合
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のライブラリのサポートもしています。
エラーログ
Sentryを使うとエラーログの詳細を簡単に見ることができます。