---
title: Overview
label: Nuxt
---

import SharedOverview from '../node/_shared-overview.md';

# Platformatic Nuxt

Platformatic Nuxt allows you to run a [Nuxt](https://nuxt.com/) application as a Platformatic Runtime application with no modifications.

## Getting Started

Create or copy a Nuxt application inside the `applications`, `services`, or `web` folder. If you are not using [`autoload`](../runtime/configuration.md#autoload), you also need to explicitly add the new application.

You are all set: start your runtime as usual via `wattpm dev` or `wattpm start`.

## Install

```bash
npm install @platformatic/nuxt
```

## Example configuration file

Create a `watt.json` in the root folder of your application with the following contents:

```json
{
  "$schema": "https://schemas.platformatic.dev/@platformatic/nuxt/3.52.4.json",
  "application": {
    "basePath": "/frontend"
  }
}
```

## Architecture

When running in development mode, Platformatic starts the Nuxt development server. Nuxt uses Vite internally for development, hot module replacement, and module transforms.

When running in production mode, Platformatic runs the Nuxt/Nitro server output generated by `nuxt build`. The default output directory is `.output`, and the production server entrypoint is `.output/server/index.mjs`.

Nuxt uses Vite internally, but Platformatic Nuxt is not a plain Vite application. Development, build, and production lifecycle are managed through Nuxt and Nitro.

When using the `commands` property, the command is responsible for starting an HTTP server. Platformatic will integrate the external application in the runtime and select the server port used by the runtime.

## Skew protection

To include the deployment ID in client assets and server-rendered HTML, add the Platformatic skew module to `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  modules: ['@platformatic/nuxt/skew']
})
```

The module is enabled when `PLT_DEPLOYMENT_ID` is set during the build.

## Integrating with other Watt applications

If the Nuxt development server needs to be reached by other applications in the Watt mesh network, configure Vite allowed hosts in `nuxt.config`:

```js
export default defineNuxtConfig({
  vite: {
    server: {
      allowedHosts: ['.plt.local']
    }
  }
})
```

This allows other applications inside the Platformatic mesh network to contact your Nuxt development server.

## Production deployment

Nuxt production builds are powered by Nitro. The standard Node.js deployment flow is:

```bash
nuxt build
node .output/server/index.mjs
```

Deploy the full `.output` directory, not only `.output/server/index.mjs`. Nitro bundles the application server, public assets, and any copied runtime dependencies inside `.output`.

## Scheduled tasks

Nuxt scheduled tasks can be managed by Watt by adding `@platformatic/nuxt/scheduler` to `nuxt.config`:

```js
export default defineNuxtConfig({
  modules: ['@platformatic/nuxt/scheduler'],
  nitro: {
    experimental: { tasks: true },
    scheduledTasks: {
      '0 * * * *': ['cleanup']
    }
  }
})
```

Define the task handler in `server/tasks/cleanup.js`. The module transfers scheduling to Watt, so the task runs locally
when no external coordinator is present and can be paused or triggered through Watt's scheduler controls when a
coordinator is used. See the [scheduler guide](../../guides/scheduler.md) for the complete configuration and
coordination flow.

## Configuration

See the [configuration](./configuration.md) page.

<SharedOverview/>
