Deploying a Nuxt 3 App with SSR on Persistent Containers
Key Facts
Direct answer: The direct answer is that Deployxa auto-detects Nuxt 3 from your `package.json` (which includes `nuxt`) and `nuxt.config.ts`. It configures the build and start commands: the build command is `npm run build`, the start command is `node .output/server/index.mjs`, and the port is configured via the `PORT` environment variable (via Nuxt's `nitro.host` and `nitro.port` settings).
Why Nuxt 3 Is a Great Choice for Vue Developers: Three reasons explain why Nuxt 3 is a great choice for Vue developers.
The Architecture: Nuxt 3 Nitro Server + Container: Here is how Deployxa deploys a Nuxt 3 app.
Step-by-Step: Deploying a Nuxt 3 App: Here is the exact workflow for a typical Cursor-generated Nuxt 3 app.
Performance: Nuxt 3 vs Next.js vs SvelteKit: Nuxt 3, Next.js, and SvelteKit are the three leading meta-frameworks in 2026.
Nuxt 3 is the leading Vue meta-framework, and it is a popular choice for AI-generated apps that need SSR (server-side rendering) with the Vue ecosystem. Like Next.js, Nuxt 3 supports SSR, SSG, and SPA modes, and it has a rich module ecosystem (Nuxt Image, Nuxt Auth, Nuxt Content, etc.) that AI assistants can leverage. But deploying Nuxt 3 with SSR requires a running Node server, which means it needs persistent containers, not serverless. Deployxa's zero-config engine handles the Nuxt 3 deployment automatically, detecting the framework from your `package.json` and `nuxt.config.ts` and configuring the build and start commands. Here is how to deploy a Nuxt 3 app with SSR on Deployxa.
The direct answer is that Deployxa auto-detects Nuxt 3 from your `package.json` (which includes `nuxt`) and `nuxt.config.ts`. It configures the build and start commands: the build command is `npm run build`, the start command is `node .output/server/index.mjs`, and the port is configured via the `PORT` environment variable (via Nuxt's `nitro.host` and `nitro.port` settings). You do not write a Dockerfile, you do not configure the server manually, and you do not manage the build output. The platform handles all of it, just as it does for Next.js and SvelteKit apps.
Why Nuxt 3 Is a Great Choice for Vue Developers
Three reasons explain why Nuxt 3 is a great choice for Vue developers. First, it is the most mature Vue meta-framework, with a large ecosystem of modules and a strong community. For teams that have standardized on Vue, Nuxt 3 is the natural choice for SSR. Second, Nuxt 3's Nitro server is fast and flexible, supporting multiple deployment targets (Node, Vercel, Cloudflare, etc.) via presets. For Deployxa, the Node preset produces a standalone Node server that runs in a persistent container. Third, Nuxt 3's API is clean and intuitive, which means the LLM can generate correct code reliably. The file-based routing, server routes, and composables are all straightforward concepts that the LLM understands well.
The Architecture: Nuxt 3 Nitro Server + Container
Here is how Deployxa deploys a Nuxt 3 app.
The Nuxt container
The ingestion service detects Nuxt 3 from your `package.json` and `nuxt.config.ts`. It configures the build and start commands:
- Build command: `npm run build`
- Start command: `node .output/server/index.mjs`
- Runtime: Node 20 with the Nitro Node preset
The Nitro configuration
Nuxt 3's Nitro server is the deployment layer that produces the server build. For Deployxa, the Node preset is used, which produces a standalone Node server in `.output/server/index.mjs`. The server listens on the port specified by the `PORT` environment variable.
The reverse proxy
Traefik v3 routes traffic from your custom domain to the Nuxt container, with automatic SSL via Let's Encrypt.
Step-by-Step: Deploying a Nuxt 3 App
Here is the exact workflow for a typical Cursor-generated Nuxt 3 app.
Step 1: Create your Nuxt 3 app
```bash
npx nuxi@latest init my-app
cd my-app
npm install
```
Step 2: Configure nuxt.config.ts
```typescript
export default defineNuxtConfig({
nitro: {
preset: 'node-server',
host: '0.0.0.0',
port: process.env.PORT || 3000,
},
runtimeConfig: {
databaseUrl: process.env.DATABASE_URL,
public: {
apiBaseUrl: process.env.PUBLIC_API_BASE_URL,
},
},
});
```
Step 3: Push to GitHub
```bash
git init
git add .
git commit -m "nuxt 3 app"
git remote add origin https://github.com/yourname/my-app.git
git push -u origin main
```
Step 4: Connect to Deployxa
In the Deployxa dashboard, connect your repository. Deployxa auto-detects Nuxt 3:
```text
[ingest] Detected Node.js project
[ingest] Framework: nuxt
[ingest] Runtime: node 20.x
[ingest] Preset: node-server
[ingest] Build command: npm run build
[ingest] Start command: node .output/server/index.mjs
[ingest] Port: $PORT
```
Step 5: Configure environment variables
In the Deployxa dashboard, add your environment variables. Nuxt 3 uses `runtimeConfig` to expose environment variables to your app, with the `public` namespace for client-side variables. For more on environment variables, see our article on the vibe coder's guide to environment variables.
Step 6: Deploy
Click Deploy. The build runs `npm run build`, which produces the `.output/` directory with the standalone Node server. The container starts with `node .output/server/index.mjs`, and your app is live within 60 to 90 seconds.
Step 7: Add a custom domain
Add a custom domain in the Deployxa dashboard. SSL is provisioned automatically.
Step 8: Verify with deployxa doctor
Run `deployxa doctor` to verify health. The 14-point readiness engine checks SSL, DNS, environment variables, health endpoints, and container status.
Common Pitfalls and Troubleshooting
The first pitfall is using the wrong Nitro preset. Nuxt 3 supports multiple Nitro presets (node-server, vercel, netlify, cloudflare, etc.), and using the wrong preset can cause deployment failures. For Deployxa, always use the `node-server` preset, because it produces a standalone Node server that runs in any Node environment. The second pitfall is environment variable handling. Nuxt 3 distinguishes between private variables (server-side only) and public variables (client-side). Private variables are in `runtimeConfig` (without the `public` namespace), while public variables are in `runtimeConfig.public`. Mixing them up can cause security issues (e.g., leaking a secret to the browser) or functionality issues (e.g., the browser not having access to a needed variable). The third pitfall is SSR vs SPA mode. Nuxt 3 defaults to SSR, which is great for SEO but requires a running Node server. If you want a static SPA (no server), set `ssr: false` in `nuxt.config.ts` and use `nuxi generate` to produce a static build. The fourth pitfall is the `ORIGIN` environment variable. Nuxt 3's Nitro server uses the `ORIGIN` environment variable for CSRF protection, similar to SvelteKit. The fix is to set `ORIGIN` in the Deployxa dashboard to your app's URL. The fifth pitfall is module compatibility. Some Nuxt modules (e.g., Nuxt Image) require additional configuration or system dependencies. The fix is to check the module's documentation for deployment-specific requirements.
Performance: Nuxt 3 vs Next.js vs SvelteKit
Nuxt 3, Next.js, and SvelteKit are the three leading meta-frameworks in 2026. Nuxt 3 produces bundles similar to Next.js (100-300KB per page), because Vue includes a runtime. SvelteKit produces smaller bundles (10-50KB per page), because Svelte's compiler eliminates the runtime overhead. For performance-critical apps (especially on mobile), SvelteKit is the best choice. For apps that need the Vue ecosystem, Nuxt 3 is the best choice. For apps that need the React ecosystem, Next.js is the best choice. Deployxa supports all three equally, with the AutoRepairService and the zero-config engine handling each framework automatically. For more on performance, see our article on SPA vs SSR hardware sizing.
Advanced Nuxt 3 Patterns
Beyond the basics, Nuxt 3 apps benefit from several advanced patterns. The first is server routes. Nuxt 3 supports server routes (API endpoints) via the `server/api/` directory, which means you can build a full-stack app without a separate backend. This is similar to Next.js's API routes and is a great pattern for simple apps. The second is Nuxt Content. Nuxt Content is a module that lets you write content in Markdown and query it via a MongoDB-like API, which is great for blogs and documentation sites. The third is Nuxt Image. Nuxt Image is a module that optimizes images automatically (resizing, format conversion, lazy loading), which improves performance. The fourth is Nuxt Auth. Nuxt Auth is a module that handles authentication (local, OAuth, etc.), which simplifies the auth flow. The fifth is testing. Nuxt 3 has built-in support for testing via `@nuxt/test-utils` and `vitest`, which makes it easy to write unit and integration tests. For more on testing, see our article on building a self-healing CI/CD pipeline. For more on framework deep-dives, see our articles on deploying a SvelteKit app and deploying a Remix app with Postgres.
Scaling and Long-Term Considerations
As your project grows beyond the initial deployment, several long-term considerations become important. The first is scalability planning. What works for 100 users might not work for 1000 or 10000 users. Plan ahead by understanding your bottlenecks: is it the database (add indexes, use read replicas), the app server (add containers, use auto-scaling), or the network (use a CDN, optimize assets)? Monitor your resource usage trends and scale proactively before you hit limits, not reactively after an outage. For more on scaling, see our article on how to scale your SaaS from MVP to first customers.
The second consideration is maintainability. As your codebase grows, technical debt accumulates. Regular refactoring, dependency updates, and code reviews keep the codebase healthy. Schedule time for maintenance (e.g., one day per month) and treat it as a feature, not an afterthought. For more on maintenance, see our article on the SaaS founder's guide to dependency management.
The third consideration is team growth. What happens when you hire your first engineer? Is the codebase understandable? Is the deployment process documented? Are the environment variables inventoried? A well-documented, well-structured project makes onboarding faster and reduces the risk of mistakes. For more on team handoff, see our article on how to build a deployment process your future team can inherit.
The fourth consideration is cost evolution. As you scale, costs increase. Without monitoring, costs can exceed revenue. Track your cost-per-user metric (total hosting cost / number of active users) and ensure it stays below your revenue-per-user. For more on cost management, see our article on the SaaS founder's guide to cost optimization.
The fifth consideration is disaster recovery. As you grow, the impact of data loss or downtime increases. Regularly test your backup restore, your rollback procedure, and your incident response plan. An untested plan is not a plan. For more on disaster recovery, see our article on the SaaS founder's guide to disaster recovery planning.
Conclusion: Nuxt 3 SSR Without the Configuration
Nuxt 3 is the leading Vue meta-framework, and deploying it with SSR should be as simple as pushing to Git. Deployxa's zero-config engine makes it so: no Dockerfile, no Nitro configuration, no build management. Stop configuring Nitro presets and start shipping.
Ready to deploy your Nuxt 3 app? Drag your project to Deployxa Drop for an instant live preview, or install the CLI with `npm i -g @deployxa/cli` and deploy from your terminal. For more on framework deep-dives, see our articles on deploying a SvelteKit app and deploying a Remix app with Postgres. Learn about deploying an Astro static site with API routes and deploying a Hono API in our companion articles. Explore our free developer tools to speed up your workflow.