Deploying a NuxtJS App

NuxtJS is a powerful Vue.js framework for building modern web applications with server-side rendering, static site generation, and a modular architecture. It simplifies development with features like file-based routing, automatic code splitting, and a rich plugin ecosystem, making it ideal for scalable and performant web projects.

This guide explains how to deploy a NuxtJS application to Klutch.sh, both with and without a Dockerfile. It also covers installation and provides sample code to get started.

Prerequisites

• Node.js and npm installed
• Git and GitHub account
• Klutch.sh account

---

Getting Started: Install NuxtJS

1. Create a new NuxtJS app:

   npx nuxi init my-nuxt-app
   cd my-nuxt-app
   npm install

2. Start the development server:

   npm run dev

   Your app should be running at http://localhost:3000.

Sample Code (pages/index.vue)

<template>
  <div>
    <h1>Welcome to NuxtJS on Klutch.sh!</h1>
    <p>This is your starter page.</p>
  </div>
</template>

<script setup>
// No script needed for this simple example
</script>

---

Deploying Without a Dockerfile

1. Push your NuxtJS app to a GitHub repository.
2. Log in to Klutch.sh.
3. Create a new project and give it a name.
4. Create a new app:
   • Select your NuxtJS GitHub repository and branch
   • Set the port to route traffic (usually 3000 for NuxtJS)
   • Choose region, compute, number of instances, and add any environment variables
5. Add a start script in your package.json:

   "scripts": {
     "start": "nuxt start"
   }

6. For Nuxt 3, the app will listen on the port provided by Klutch.sh automatically unless you use a custom server.
7. Click “Create” to deploy. Klutch.sh will build and deploy your app automatically.

---

Deploying With a Dockerfile

1. Add a Dockerfile to your project root. Example for Nuxt 3:

   # Use official Node.js image
   FROM node:18-alpine
   
   # Set working directory
   WORKDIR /app
   
   # Copy package files and install dependencies
   COPY package*.json ./
   RUN npm install --production
   
   # Copy app source
   COPY . .
   
   # Build NuxtJS app
   RUN npm run build
   
   # Expose port (match your NuxtJS app)
   EXPOSE 3000
   
   # Start the app
   CMD ["npm", "start"]

2. Push your code (with Dockerfile) to GitHub.
3. In Klutch.sh, follow the same steps to create a project and app, but select the Dockerfile option when prompted.
4. Set the service details and environment variables as needed.
5. Click “Create” to deploy. Klutch.sh will build your Docker image and deploy your app.

Note: If you use a custom server, ensure it listens on the PORT environment variable as shown above.

---

Resources

• Klutch.sh Documentation
• NuxtJS Documentation

---

Deploying to Klutch.sh is simple and flexible. Choose the method that best fits your workflow and project requirements.