·
3 min read

Dockerizing a Nuxt App: A Comprehensive Guide

Dockerizing a Nuxt App: A Comprehensive Guide Image

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:

bash
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:

Dockerfile
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:

bash
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:

bash
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:

yaml
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:

bash
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:

I will never share any of your personal data. You can unsubscribe at any time.

If you found this article helpful.You will love these ones as well.
Analyze Memory Leaks in Your Nuxt App Image

Analyze Memory Leaks in Your Nuxt App

Self-Host Your Nuxt App With Coolify Image

Self-Host Your Nuxt App With Coolify

Focus & Code Diff in Nuxt Content Code Blocks Image

Focus & Code Diff in Nuxt Content Code Blocks

A Comprehensive Guide to Data Fetching in Nuxt 3 Image

A Comprehensive Guide to Data Fetching in Nuxt 3