Dockerizing a Nuxt App: A Comprehensive Guide

Docker has revolutionized the way developers build, ship, and run applications by providing a consistent environment for development, testing, and production.

In this guide, I'll walk you through the steps to dockerize a Nuxt 3+ application, enabling you to create a containerized version of your app that can be easily deployed across different environments.

Why Dockerize Your Nuxt App?

Before we dive into the details, let's discuss why you might want to dockerize your Nuxt 3 app:

1. Consistency: Docker ensures that your application runs the same way on any machine, eliminating the "works on my machine" problem.
2. Isolation: Each application runs in its own container, isolated from other applications and their dependencies.
3. Scalability: Docker makes it easier to scale your applications horizontally by running multiple containers.
4. Portability: Docker containers can run on any system that supports Docker, making it easy to move applications between environments.

Prerequisites

To follow along with this guide, you'll need the following:

• I'm using pnpm as the package manager in this guide, but you can use npm, yarn or bun if you prefer.
• Basic knowledge of Docker and Docker Compose.
• A Nuxt 3+ application.
• Docker installed on your machine.

Step 1: Set Up Your Nuxt 3 Application

If you don't have a Nuxt 3+ app already, create one using the following commands:

pnpm dlx nuxi@latest init my-nuxt-app
cd my-nuxt-app
pnpm install

This will create a new Nuxt 3+ application in the my-nuxt-app directory and install all the necessary dependencies.

Step 2: Create a Dockerfile

In the root of your Nuxt 3+ application, create a file named Dockerfile. This file will define the environment and the steps needed to run your application inside a Docker container.

Here's an example Dockerfile for a Nuxt 3+ application:

ARG NODE_VERSION=20.14.0

# Create build stage
FROM node:${NODE_VERSION}-slim AS build

# Enable pnpm
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and pnpm-lock.yaml files to the working directory
COPY ./package.json /app/
COPY ./pnpm-lock.yaml /app/

## Install dependencies
RUN pnpm install --shamefully-hoist

# Copy the rest of the application files to the working directory
COPY . ./

# Build the application
RUN pnpm run build

# Create a new stage for the production image
FROM node:${NODE_VERSION}-slim

# Set the working directory inside the container
WORKDIR /app

# Copy the output from the build stage to the working directory
COPY --from=build /app/.output ./

# Define environment variables
ENV HOST=0.0.0.0 NODE_ENV=production
ENV NODE_ENV=production

# Expose the port the application will run on
EXPOSE 3000

# Start the application
CMD ["node","/app/server/index.mjs"]

Step 3: Build and Run the Docker Image

With the Dockerfile in place, you can build the Docker image using the following command:

docker build -t my-nuxt-app .

This command tells Docker to build an image with the tag my-nuxt-app using the current directory (denoted by the .).

Once the image is built, you can run a container using the following command:

docker run -p 3000:3000 my-nuxt-app

This command runs the my-nuxt-app container and maps port 3000 on your host machine to port 3000 inside the container. You should now be able to access your Nuxt 3 application by navigating to http://localhost:3000 in your web browser.

Step 4: Using Docker Compose (Optional)

For more complex applications with multiple services (e.g., a database and a web server), you can use Docker Compose to define and run multi-container Docker applications.

Create a docker-compose.yml file in the root of your project:

version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"

With this docker-compose.yml file, you can build and run your multi-container application using a single command:

docker-compose up

Conclusion

Dockerizing your Nuxt 3 application provides numerous benefits, including consistency, isolation, scalability, and portability.

By following this guide, you can easily create a Docker container for your Nuxt 3+ app and run it in any environment that supports Docker. Whether you're a solo developer or part of a larger team, Docker can help streamline your development workflow and simplify deployment processes.

If you liked this article, follow me on X to get notified about my new blog posts and more content.

Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter: