Nuxt.js+TypeScript+Composition APIの開発環境をDockerで構築

project
├── README.md
├── application
│   ├── assets
│   ├── components
│   ├── layouts
│   ├── middleware
│   ├── node_modules
│   ├── nuxt.config.ts
│   ├── package-lock.json
│   ├── package.json
│   ├── pages
│   ├── plugins
│   ├── static
│   ├── store
│   └── tsconfig.json
├── docker
│   └── Dockerfile
└── docker-compose.yml

mkdir project
cd project

npx create-nuxt-app application

##設定情報
? Project name: project_name
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using
typescript)
? Continuous integration: None
? Version control system: Git

cd application
npm run dev

（中略）

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                              12:11:06
ℹ Initial build may take a while                                                                                                 12:11:06
ℹ Discovered Components: .nuxt/components/readme.md                                                                              12:11:06
✔ Builder initialized                                                                                                            12:11:06
✔ Nuxt files generated                                                                                                           12:11:06

✔ Client
  Compiled successfully in 6.68s

ℹ Waiting for file changes                                                                                                       12:11:15
ℹ Memory usage: 375 MB (RSS: 497 MB)                                                                                             12:11:15
ℹ Listening on: http://localhost:3000/                                                                                           12:11:15
No issues found.    

import colors from 'vuetify/es5/util/colors'

export default {
  // (中略)

}

import colors from 'vuetify/es5/util/colors'
// 追記
import { NuxtConfig } from '@nuxt/types' 

// 変更
const config: NuxtConfig = {
  // (中略)

}

// 追記
export default config

"types": [
  "@nuxt/types",
  "@nuxtjs/axios",
  "@types/node",
  "vuetify"  // 追記
]

npm install @vue/composition-api

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

Vue.use(VueCompositionApi)

const config: NuxtConfig = {
  // (中略)
  plugins: ['@/plugins/composition-api']
}

<template>
  <div>
    Name: {{ fullName }}
    <br>
    Message: {{ message }}
  </div>
</template>

// typescriptを使用するため lang="ts"とする。
<script lang="ts">
// composition APIを使用するためのインポート
import { defineComponent, computed, ref } from '@vue/composition-api'

interface User {
  firstName: string
  lastName: string
}

export default defineComponent({
  setup () {
    const user: User = {
      firstName: 'yamada',
      lastName: 'taro'
    }
    const fullName = computed(() => `${user.firstName} ${user.lastName}`)
    const message = ref('Composition test')

    return {
      fullName,
      message
    }
  }
})
</script>

# 公式で最新の最新の LTS バージョンがインストールを推奨とあったので、最新のLTSのイメージを使用
# https://nodejs.org/en/
FROM node:16.13.2-alpine

# ADDやCOPY、CMDを実行するフォルダを指定
# 指定しないと、package.jsonのインストール時にエラーになる
WORKDIR /var/www

RUN apk update

# Macのlocalhostからdockerコンテナにアクセスするために必要
ENV HOST 0.0.0.0

# 待ち受けポートを明示
EXPOSE 3000

version: "3"

services:
  web-front:
    build: ./docker
    container_name: web-front
    networks:
      - web-network
    volumes:
      - ./application:/var/www/
      - node-modules:/var/www/node_modules
    ports:
      - "3000:3000"
    restart: always
    tty: true
    command: sh -c "npm install && npm run dev"

networks:
  web-network:

volumes:
  node-modules:

# buildに使用するDockerfileの相対パス
build: ./docker

# 必須ではないが、生成されるコンテナ名を毎回同じにしたいため指定
container_name: web-front

# ゆくゆくはバックエンド側のコンテナと通信を行いたいため指定
networks: web-network

# nuxtプロジェクトをDockerfileで指定したWORKDIRにマウント
# node_modulesを保存しておくためのvolumeを指定
volumes: 
 - ./application:/var/www/
 - node-modules:/var/www/node_modules

# web-networkのポートとコンテナの待ち受けポートをマッピング
# nuxtはデフォルトで3000ポートを使用
ports:
 - "3000:3000"

# コンテナの軌道に失敗した場合、リスタートするよう設定
restart: always

# コンテナの出力を標準出力に出力するために設定
tty: true

# コンテナ起動後に実行するコマンド
command: sh -c "npm install && npm run dev"

docker-compose up 

cd application
rm -rf .git

echo "# project" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin [email protected]:{githubID}/{プロジェク名}.git
git push -u origin main