---
title: nuxt-ops
description: The Nuxt module for apps that run on ops. Runtime config, translations pulled at build time and a status banner.
order: 0
---

`@syncronet/nuxt-ops` is the Nuxt module a frontend on ops registers to get three things
without copying any of them into the app:

- [Runtime config](configuration.md): `runtimeConfig.public.ops` with your project,
  environment and the address of ops, overridable when the server starts.
- [Translations at build time](translations.md): your locale files refreshed from ops
  before every build, and never a failed build because of it.
- [Status banner](status-banner.md): `<OpsStatusBanner>` and `useOpsStatus()`, which show a
  line only while something on the status page is degraded or down.

## Install

The package is on the ops npm registry. Add the registry to the app's `.npmrc`, with a
token that may read packages (keep the token out of a checked in file; an environment
variable works):

```ini
@syncronet:registry=https://ops.syncronet.dev/npm/
//ops.syncronet.dev/npm/:_authToken=${OPS_NPM_TOKEN}
```

```sh
pnpm add -D @syncronet/nuxt-ops
```

The trailing slash on the `_authToken` line matters: without it npm sends no token. The
package ships TypeScript source that your app's build compiles, and needs Nuxt 4.5 or
newer and Vue 3.5.

## The smallest setup

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@syncronet/nuxt-ops'],
  ops: {
    project: 'rungholt',
  },
})
```

```vue
<!-- app.vue -->
<template>
  <OpsStatusBanner />
  <NuxtPage />
</template>
```

With `OPS_URL` and `OPS_API_TOKEN` set in the build's environment, every build now pulls the project's
translations into `i18n/locales/` first.