> ## Documentation Index
> Fetch the complete documentation index at: https://bunny.net/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy Nuxt to Bunny Storage

> Build a Nuxt site and serve it from Bunny Storage through Bunny CDN, with the Bunny CLI or by hand.

`nuxt generate` prerenders every route of your Nuxt app into `.output/public`. To run Nuxt with a server, deploy it with [Magic Containers](https://bunny.net/docs/magic-containers/guides/nuxt.md).

| Setting | Value |
| - | - |
| Build command | `npx nuxt generate` |
| Output directory | `.output/public` |

## Deploy your site

> [tab] Bunny CLI
>
> > [!WARNING]
> >
> > `bunny sites` is in [Public Preview](https://bunny.net/docs/product-release-stages.md#stage-2-public-preview)
> > and available only in the Bunny CLI. It's in active development, so commands,
> > flags, and behaviour may change. Share feedback on
> > [Discord](https://discord.gg/bunnynet). The storage zone and pull zone behind
> > each site appear in the dashboard under **Storage** and **CDN**.
>
> **1. Install the Bunny CLI and log in**
>
> ```bash theme={null}
> curl -fsSL https://cli.bunny.net/install.sh | sh
> bunny login
> ```
>
> See [Installation](https://bunny.net/docs/cli/installation.md) for npm and other options.
>
> **2. Create a site**
>
> From your project root, run:
>
> ```bash theme={null}
> bunny sites create my-site
> ```
>
> Replace `my-site` with a name for your site. The CLI creates a storage zone for your files and a pull zone to serve them, then links this directory to the new site. The site is served at a `b-cdn.net` address, and the CLI prints the URL.
>
> **3. Build and deploy**
>
> ```bash theme={null}
> bunny sites deploy --build
> ```
>
> The CLI runs the build command, uploads the output directory from the table above, and publishes it. Every deploy is kept, so you can roll back with `bunny sites deployments publish --previous`.
>
> **4. Deploy on every push (optional)**
>
> ```bash theme={null}
> bunny sites ci init
> ```
>
> This writes a GitHub Actions workflow to `.github/workflows/bunny-sites.yml` that deploys the site on every push to `main`. Add your API key to the repository as a `BUNNYNET_API_KEY` secret. The CLI offers to run `gh secret set BUNNYNET_API_KEY` for you.

> [tab] Manually
>
> **1. Build your site**
>
> From your project root, run `npx nuxt generate`. The build writes your site to the output directory listed in the table above.
>
> **2. Create a storage zone**
>
> In the [bunny.net dashboard](https://dash.bunny.net), go to **Storage** and click **Add Storage Zone**. Give it a name, pick the main region closest to your audience, and click **Add Storage Zone**.
>
> **3. Upload your files**
>
> Open the storage zone's file manager and upload the contents of your output directory to the root of the zone. To script uploads, use the [Storage HTTP API](https://bunny.net/docs/storage/http.md).
>
> **4. Create a pull zone**
>
> Go to **CDN** and click **Add Pull Zone**. Set **Origin Type** to **Storage Zone**, select the zone you created, and click **Add Pull Zone**.
>
> Your site is live at `https://<pull-zone-name>.b-cdn.net`.

## Resize images with Bunny Optimizer

[Nuxt Image](https://image.nuxt.com/providers/bunny) has a built-in `bunny` provider that adds [Bunny Optimizer](https://bunny.net/docs/optimizer/dynamic-images/overview.md) parameters to each image URL, so `nuxt generate` skips image processing and the edge resizes every width in the `srcset`.

**1. Turn on Optimizer**

`bunny sites create` leaves query strings and Optimizer off, so open the site's pull zone under **CDN → Pull Zones**:

* Turn on [URL Query String](https://bunny.net/docs/cdn/vary-cache.md#url-query-string) vary, so each `?width=` gets its own cache entry.
* Enable [Bunny Optimizer](https://bunny.net/docs/optimizer/quickstart.md), then turn on the Dynamic Image API and automatic WebP under **Optimizer → Settings**. Your build has already minified CSS and JavaScript, so turn Optimizer's minification off.

**2. Use the bunny provider**

```bash theme={null}
npx nuxt module add image
```

```ts nuxt.config.ts theme={null}
export default defineNuxtConfig({
  modules: ["@nuxt/image"],
  image: {
    provider: "bunny",
    bunny: { baseURL: "/" },
  },
});
```

A `baseURL` of `/` keeps image URLs relative, so they work on the `b-cdn.net` address and your custom domain.

**3. Add images**

```vue theme={null}
<NuxtImg src="/images/photo.jpg" width="1200" height="600" sizes="sm:100vw md:768px" />
```

`<NuxtImg>` writes a `srcset` with URLs such as `/images/photo.jpg?width=768&height=384`. Use breakpoint prefixes in `sizes`, since a bare `100vw` produces 1px and 2px entries.

## Add a custom domain

With the Bunny CLI, add the domain to your site:

```bash theme={null}
bunny sites domains add example.com
```

The CLI prints the `CNAME` record to create with your DNS provider. Once the record resolves, issue a free certificate with `bunny sites domains ssl example.com`.

For a manual deploy, add the hostname to your pull zone by following [Custom hostnames](https://bunny.net/docs/cdn/custom-hostname.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.