@vidtreo/recorder-nuxt

The fastest way to ship browser-based video recording in a Nuxt 3 app. One line in nuxt.config.ts and you get a fully styled <VidtreoRecorder> component auto-imported, registered client-only (no SSR drama), with the recorder CSS injected into your global stylesheet. It's a thin, opinionated wrapper around @vidtreo/recorder-vue — same component, same composables, zero boilerplate.

What it does for you

• 🪄 Auto-imports <VidtreoRecorder> (and the routing variants) globally — no manual import, no plugin file.
• 📱 Client-only by default — recording is 100% a browser concern, so the components are registered with mode: "client". No hydration errors, no window is not defined.
• 🎨 CSS auto-injected — the recorder stylesheet is pushed into nuxt.options.css so it ships with your app's regular CSS bundle.
• 🧩 Configurable prefix — rename the components if you already have something called <VidtreoRecorder> in your code (rare, but supported).
• 🛠️ Composables work too — the underlying useVidtreoRecorder / useMobileWebRecorder / useNativeCamera / usePermissionFlow / useRecorderTranslations composables are importable from @vidtreo/recorder-vue exactly as they are outside Nuxt.

Installation

npm install @vidtreo/recorder-nuxt @vidtreo/recorder-vue @vidtreo/recorder

Peer dependencies:

• nuxt >=3.0.0
• @vidtreo/recorder-vue >=1.6.0

Configure

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@vidtreo/recorder-nuxt"],

  vidtreoRecorder: {
    prefix: "Vidtreo",   // default
    injectCss: true,     // default
  },
});

| Option | Type | Default | Effect | |--------|------|---------|--------| | prefix | string | "Vidtreo" | Prefix added to the auto-imported component names (VidtreoRecorder, VidtreoStandardRecorder, VidtreoMobileWebRecorderUI, VidtreoNativeCameraUI). | | injectCss | boolean | true | Whether to push @vidtreo/recorder-vue/styles.css into nuxt.options.css. Disable if you want to inject the styles manually. |

Usage

Once the module is active, the components are globally available everywhere in your app — no imports needed in <script setup>. Wrap the component in <ClientOnly> only if you also render fallback content on the server.

<script setup lang="ts">
import type { VidtreoRecorderProps } from "@vidtreo/recorder-vue";

const recorderProps: VidtreoRecorderProps = {
  apiKey: useRuntimeConfig().public.vidtreoApiKey,
  lang: "en",
  countdownDuration: 3,
  enableSourceSwitching: true,
  enableMute: true,
  enablePause: true,
};

function onComplete(result: { recordingId: string; uploadUrl: string }) {
  console.log("Uploaded:", result.recordingId);
}
</script>

<template>
  <VidtreoRecorder
    :recorder-props="recorderProps"
    @upload-complete="onComplete"
    @error="(err) => console.error(err)"
  />
</template>

Runtime config (recommended for API keys)

Keep the key out of the client bundle by reading it from Nuxt's runtime config:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@vidtreo/recorder-nuxt"],
  runtimeConfig: {
    public: {
      vidtreoApiKey: process.env.NUXT_PUBLIC_VIDTREO_API_KEY,
    },
  },
});

<script setup lang="ts">
const { vidtreoApiKey } = useRuntimeConfig().public;
</script>

<template>
  <VidtreoRecorder :recorder-props="{ apiKey: vidtreoApiKey }" />
</template>

Demo mode

No backend, no API key — record locally and offer a download button:

<template>
  <VidtreoRecorder :recorder-props="{ demo: true }" />
</template>

Custom UI via composables

Auto-imports don't include the composables (they're TS, not components). Import them explicitly from @vidtreo/recorder-vue:

<script setup lang="ts">
import { useVidtreoRecorder } from "@vidtreo/recorder-vue";

const { state, actions, audioLevel } = useVidtreoRecorder({
  apiKey: useRuntimeConfig().public.vidtreoApiKey,
});
</script>

<template>
  <ClientOnly>
    <div>
      <video v-if="state.stream" :srcObject="state.stream" autoplay muted playsinline />
      <button @click="actions.startRecording()">Start</button>
      <button @click="actions.stopRecording()">Stop</button>
      <p>{{ state.timer }}</p>
    </div>
  </ClientOnly>
</template>

See the @vidtreo/recorder-vue README for the full composable API, state shape, actions, and i18n options — everything works identically inside Nuxt.

Components registered by the module

| Auto-import name (default prefix) | Underlying Vue component | |-----------------------------------|--------------------------| | <VidtreoRecorder> | VidtreoRecorder (the routing entry — picks desktop / mobile-overlay / native automatically) | | <VidtreoStandardRecorder> | StandardRecorder (desktop / embed UI) | | <VidtreoMobileWebRecorderUI> | MobileWebRecorderUI (mobile overlay modal) | | <VidtreoNativeCameraUI> | NativeCameraUI (file input + transcoding) |

With a custom prefix: "Foo" you'd get <FooRecorder>, <FooStandardRecorder>, etc.

SSR & <ClientOnly>

The components are registered with mode: "client", so Nuxt skips them on the server automatically — no need to wrap them in <ClientOnly> unless you also want to render placeholder content during SSR:

<template>
  <ClientOnly>
    <VidtreoRecorder :recorder-props="{ apiKey }" />
    <template #fallback>
      <div class="recorder-skeleton">Loading recorder…</div>
    </template>
  </ClientOnly>
</template>

Playground

The package ships with a Nuxt playground for local development:

cd packages/recorder-nuxt
bun install
bun run dev:prepare   # generate types
bun run dev           # starts the playground at http://localhost:3000

License

MIT