Nuxt3のdocker環境を構築してみた

ディレクトリ構成

code
|-app
|-docker
  |-app
    |-Dockerfile
|-docker-compose.yml

docker-compose.yml

version: '3.7'
services:
    app:
        container_name: app
        ports: 
            - 3100:3000
        build: ./docker/app
        volumes: 
            - ./app:/app
        tty: true
        stdin_open: true
        environment: 
            - ports=3000
            - CHOKIDAR_USEPOLLING=true
            - HOST=0.0.0.0
        networks:
            - app-network
networks: 
    app-network:

app/Dockerfile

FROM node:18-buster
ENV TZ Asia/Tokyo

WORKDIR /app

RUN apt-get update \
&& apt-get install -y

RUN npm install npm@latest nuxi nuxt3

上記準備をしたらcodeディレクトリ直下（docker-compose.ymlが存在するディレクトリ内）で

docker-compose build
docker-compose up -d

コンテナに入る

docker-compose exec app sh

プロジェクト作成

npx nuxi init

Which package manager would you like to use? と聞かれるので npm を選択

nuxtインストール

npm install

npm run devでサーバーを起動してlocalhost:3100にアクセス

NUXT3の画面が表示されればOK

nuxt.config.tsのエラーメッセージが消えない・・・

nuxt.config.tsにコンポーネントの設定を追記したところ、なぜかエラーメッセージが、、、

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  // 以下を追記
  components: [
    {
      path: '~/components',
      pathPrefix: true,
    },
  ],
})

エラーメッセージ

Argument of type '{ devtools: { enabled: boolean; }; components: { path: string; pathPrefix: boolean; }[]; }' is not assignable to parameter of type 'InputConfig<NuxtConfig, ConfigLayerMeta>'.
  Object literal may only specify known properties, and 'components' does not exist in type 'InputConfig<NuxtConfig, ConfigLayerMeta>'.

以下を参考にtypescript vue-tsc @types/nodeをインストール

npm i -D typescript
npm i -D vue-tsc
npm i -D @types/node

https://zenn.dev/nakamura196/articles/3cbae2923e0aff
https://github.com/nuxt/nuxt/issues/20040#issuecomment-1494804429

それでも解決せず、、、

最終的にVScodeのアップデートで解決

以下を参考に、VScodeのアップデートを実行。
https://github.com/nuxt/nuxt/issues/20040#issuecomment-1545701574

※以下はmacの方法です。
1.code->check for updateをクリック
2.以下のエラーに遭遇、、、

Cannot update while running on a read-only volume. The application is on a read-only volume. Please move the application and try again. If you’re on macOS Sierra or later, you’ll need to move the application out of the Downloads directory. See this link for more information.

3.VSCodeを一旦終了
4.VSCodeをアプリケーションフォルダに入れる
※VSCodeがアプリケーションフォルダに入っていない場合にアップデートできないようで、私の場合はダウンロードフォルダに入っていました。
5.VSCodeを起動
6.1の手順でアップデートを実行
7.VSCodeを再起動

半日以上エラー解決できずに苦しみました。。。どなたかの参考になりましたら幸いです。