Merge pull request #6 from StefanVDWeide/docs/nuxt-examples

Docs: nuxt examples & Vuejs fix

README.md

@@ -14,11 +14,11 @@ This repository contains examples of how to deploy applications using Dokploy.
 - [x] Svelte
 - [x] Vite
 - [x] VueJS
+- [x] Nuxt
 - [x] AstroJS
 - [x] Astro SSR
 - [x] Go Fiber
 - [x] NestJS
 - [x] T3 App
 
-
 ---

nuxt/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

nuxt/README.md

@@ -0,0 +1,61 @@
+# Nuxt Example
+
+This repository contains an example of a Nuxt application that is deployed on Dokploy. There are two ways to deploy this application:
+
+- With server side rendering
+- As a static site
+
+All examples assume you use `Nixpacks` as the build type.
+
+## Server side rendering
+
+1. **Use Git Provider in Your Application**:
+   - Repository: `https://github.com/Dokploy/examples.git`
+   - Branch: `main`
+   - Build path: `/nuxt`
+
+2. **Add Environment Variables**:
+
+- Navigate to the "Environments" tab and add the following variable:
+
+   ```plaintext
+   NIXPACKS_START_CMD="node .output/server/index.mjs"
+   ```
+
+3. **Click on Deploy**:
+   - Deploy your application by clicking the deploy button.
+
+4. **Generate a Domain**:
+    - Click on generate domain button.
+    - A new domain will be generated for you.
+    - You can use this domain to access your application.
+
+## Static site
+
+1. **Use Git Provider in Your Application**:
+   - Repository: `https://github.com/Dokploy/examples.git`
+   - Branch: `main`
+   - Build path: `/nuxt`
+
+2. **Add Environment Variables**:
+
+- Navigate to the "Environments" tab and add the following variable:
+
+   ```plaintext
+   NIXPACKS_BUILD_CMD="pnpm generate" 
+   ```
+
+3. **Set the publish directory**:
+
+- Ensure you set it to `dist/`. Note that there is no dot before `dist`!
+
+4. **Click on Deploy**:
+   - Deploy your application by clicking the deploy button.
+
+5. **Generate a Domain**:
+    - Click on generate domain button.
+    - A new domain will be generated for you.
+    - You can use this domain to access your application.
+    - Set the port to 80
+
+If you need further assistance, join our [Discord server](https://discord.com/invite/2tBnJ3jDJc).

nuxt/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtWelcome />
+  </div>
+</template>

nuxt/nuxt.config.ts

@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true }
+})

nuxt/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.14.159",
+    "vue": "latest",
+    "vue-router": "latest"
+  }
+}

nuxt/public/robots.txt

@@ -0,0 +1 @@
+

nuxt/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

nuxt/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

vuejs/README.md

@@ -2,17 +2,16 @@
 
 This repository contains an example of vuejs application that is deployed on Dokploy.
 
+This example assume you use `Nixpacks` as the build type.
 
 1. **Use Git Provider in Your Application**:
    - Repository: `https://github.com/Dokploy/examples.git`
    - Branch: `main`
    - Build path: `/vuejs`
 
-2. **Add Environment Variables**:
-- Navigate to the "Environments" tab and add the following variable:
-   ```plaintext
-   NIXPACKS_START_CMD="pnpm run preview"
-   ```
+2. **Set the publish publish directory**:
+
+- Ensure you set it to `dist/`. Note that there is no dot before `dist`!
 
 3. **Click on Deploy**:
    - Deploy your application by clicking the deploy button.
@@ -21,6 +20,6 @@ This repository contains an example of vuejs application that is deployed on Dok
     - Click on generate domain button.
     - A new domain will be generated for you.
     - You can use this domain to access your application.
+    - Set the port to 80
 
-    
 If you need further assistance, join our [Discord server](https://discord.com/invite/2tBnJ3jDJc).