Dev Containers

Set up or open a Nuxt project in a dev container for a consistent development environment.

Setting Up a Dev Container

If you're starting a new Nuxt project and want to develop inside a dev container, you can add the configuration yourself.

Read more about dev containers

Prerequisites

Create the Configuration

Create a .devcontainer/ folder in your project root with these two files:

devcontainer.json
{
  "name": "nuxt-devcontainer",
  "build": {
    "dockerfile": "Dockerfile",
    "context": "../"
  },
  "forwardPorts": [3000],
  "portsAttributes": {
    "3000": {
      "label": "Application",
      "onAutoForward": "openPreview"
    }
  },
  "mounts": [
    "type=volume,target=${containerWorkspaceFolder}/node_modules"
  ],
  "postStartCommand": "pnpm install && pnpm dev:prepare"
}
Dockerfile
FROM node:lts

WORKDIR /app

RUN npm i -g corepack && corepack enable

COPY package.json pnpm-lock.yaml pnpm-workspace.yaml  ./
RUN pnpm install --frozen-lockfile

COPY . .

This configuration uses Node.js LTS and enables pnpm via corepack. It forwards port 3000 for the Nuxt dev server and persists node_modules in a Docker volume to avoid reinstallation on container restarts.

To use a different package manager, replace corepack enable with your preferred manager (for example, npm install -g yarn) and update the postStartCommand accordingly.

Opening an Existing Dev Container

If a project already includes a dev container configuration, you can open it using any of these methods:

1. VS Code Prompt

When you open the project in VS Code, you should see a notification in the bottom right corner:

"Reopen in Dev Containers"

Click this button to build and open the project in a dev container.

2. Command Palette

If you dismiss the prompt or want to manually trigger it:

  1. Open the Command Palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows/Linux)
  2. Search for "Dev Containers: Reopen in Container"
  3. Select it

VS Code will build the container and reopen your project.

3. Dev Containers CLI

For advanced users or CI workflows, you can use the Dev Containers CLI directly:

# Install the CLI (if not already installed)
npm install -g @devcontainers/cli

# Build and open the project in a container
devcontainer up --workspace-folder .

# After making changes to .devcontainer, rebuild
devcontainer build

Next Steps

Once the container is running:

pnpm dev

Your Nuxt app will be available at http://localhost:3000.