1---
2title: Nuxt
3description: Deploy Nuxt to Prisma Compute with Prisma.Website.Nuxt — Nitro's Node target running on Bun and Nuxt's own dev server locally.
4sidebar:
5 order: 10
6---
7
8import { Code, Tabs, TabItem } from "@astrojs/starlight/components";
9
10export const devDeps = "@alchemy.run/frontend-frameworks @vercel/nft";
11
12`Prisma.Website.Nuxt` builds [Nuxt](https://nuxt.com) through your
13project's `@nuxt/kit` with Nitro's Node target. The server, client
14assets, and prerendered pages are uploaded as `tar.gz` and run on
15**Bun in Prisma Compute**. No Docker image or registry is involved.
16
17## Install
18
19Install the build integration in your project; the resource loads its
20`/nuxt` and `/nuxt/node` exports:
21
22<Tabs syncKey="pkgManager">
23 <TabItem label="bun" icon="bun"><Code code={`bun add -d ${devDeps}`} lang="sh" /></TabItem>
24 <TabItem label="npm" icon="npm"><Code code={`npm install -D ${devDeps}`} lang="sh" /></TabItem>
25 <TabItem label="pnpm" icon="pnpm"><Code code={`pnpm add -D ${devDeps}`} lang="sh" /></TabItem>
26 <TabItem label="yarn" icon="seti:yarn"><Code code={`yarn add -D ${devDeps}`} lang="sh" /></TabItem>
27</Tabs>
28
29## Configure Nuxt
30
31Your `nuxt.config.ts` loads natively, including modules and layers:
32
33```typescript
34// nuxt.config.ts
35export default defineNuxtConfig({
36 modules: ["@nuxtjs/tailwindcss"],
37 routeRules: { "/about": { prerender: true } },
38});
39```
40
41Don't set `nitro.preset`. The shared Node target owns the preset and
42rejects foreign presets. That build target still runs on Bun on Prisma.
43
44## Declare the Website
45
46```typescript
47// alchemy.run.ts
48import * as Prisma from "alchemy/Prisma";
49
50export const Website = Prisma.Website.Nuxt("Website");
51```
52
53`rootDir` defaults to `"."`. Omit `project` to create a database-less
54Prisma project on live deploy, or pass a project already in your Stack.
55
56## Add it to the Stack
57
58```typescript
59// alchemy.run.ts
60import * as Alchemy from "alchemy";
61import * as Effect from "effect/Effect";
62
63export default Alchemy.Stack(
64 "MyNuxtSite",
65 { providers: Prisma.providers(), state: Alchemy.localState() },
66 Effect.gen(function* () {
67 const site = yield* Website;
68 return { url: site.url };
69 }),
70);
71```
72
73`site.url` is the Compute endpoint on deploy and Nuxt's local URL in dev.
74
75## Add environment variables
76
77```diff lang="typescript"
78export const Website = Prisma.Website.Nuxt("Website", {
79+ env: {
80+ GREETING: "Hello from Alchemy!",
81+ NUXT_PUBLIC_API_BASE: "https://api.example.com",
82+ },
83});
84```
85
86The environment is set before build and dev, and passed to Compute.
87Matching `NUXT_*` keys override declared `runtimeConfig` values using
88Nuxt's normal conventions. Public runtime config is visible to the
89browser; do not put secrets there.
90
91## Read the environment in server code
92
93```typescript
94// server/api/hello.ts
95export default defineEventHandler(() => ({
96 greeting: process.env.GREETING ?? "hello",
97}));
98```
99
100Server routes and SSR run on Bun and can read `process.env`.
101
102## Prerendering
103
104Override native config with the `nuxt` bag:
105
106```typescript
107export const Website = Prisma.Website.Nuxt("Website", {
108 nuxt: {
109 routeRules: { "/about": { prerender: true } },
110 },
111});
112```
113
114Prerendered pages land in `.output/public` and are served as files
115before the Nitro handler. They remain part of the Compute deployment,
116not a separate CDN publication. Use `prerender` for build-time static
117routes and Nitro `cache` rules for runtime caching; provider-specific
118ISR behavior from Vercel or Netlify does not carry over to this target.
119
120## Local dev
121
122`bun alchemy dev` starts Nuxt's native server with HMR and creates no
123Prisma resources for the Website. Use `.pipe(Alchemy.remote())` to
124opt into the live deployment during dev.
125
126## Custom domain
127
128```typescript
129export const Website = Prisma.Website.Nuxt("Website", {
130 domain: "app.example.com",
131});
132```
133
134`Prisma.CustomDomain` requires the project's current default branch.
135Configure its returned DNS records yourself and check provisioning
136status before cutover. See
137[Custom domains](/prisma/frontend/websites#custom-domains).
138
139## Where next
140
141- [Nuxt API](/providers/prisma/website/nuxt).
142- [Nuxt example](https://github.com/alchemy-run/alchemy/tree/main/examples/prisma-website-nuxt).
143- [Websites](/prisma/frontend/websites), [Compute apps](/prisma/compute/apps), and [Setup](/prisma/setup).