jsschools

<DevOnly>

Renders its slot only during development and strips it from production builds.

Since Nuxt 3.0 Spec ↗

Syntax

<DevOnly> ... </DevOnly>

Returns

Component — Slot content in dev; removed entirely in production.

Examples

<template>
  <DevOnly>
    <DebugPanel :state="store.$state" />
  </DevOnly>
</template>

<template>
  <DevOnly>
    <p>Dev build</p>
    <template #fallback>
      <p>Production build</p>
    </template>
  </DevOnly>
</template>

Notes

Unlike `v-if="dev"`, the content is completely removed from the production bundle at build time, so debug-only widgets add zero production weight. Provide a `#fallback` slot for what should render in production instead.

See also