---
title: "NUXT_B3014"
description: "Event listener on a server component"
canonical_url: "https://nuxt-git-fix-sanitize-data-nuxt-js.vercel.app/docs/4.x/errors/b3014"
---
# B3014

A template uses `v-on` (or `@`) or `v-model` on a server component. Server components render on the server only and ship no JavaScript for themselves, so they never emit events and cannot update a `v-model` binding. The listener is never called.

This warning is reported unless [`experimental.templateDiagnostics`](https://nuxt-git-fix-sanitize-data-nuxt-js.vercel.app/docs/4.x/guide/going-further/experimental-features#templatediagnostics) is disabled. `@error` is not reported: a server component emits `error` when it fails to load.

## Resolution

Render the interactive part on the client. You can pair the server component with a `.client.vue` component of the same name, render an interactive child with the `nuxt-client` attribute (with `experimental.componentIslands.selectiveClient` enabled), or move the listener to a client component that wraps the server component.

```vue [app/components/Counter.server.vue]
<template>
  <div>
    <!-- rendered on the server, then hydrated on the client -->
    <CounterButton nuxt-client />
  </div>
</template>
```

::read-more{to="https://nuxt-git-fix-sanitize-data-nuxt-js.vercel.app/docs/4.x/guide/concepts/server-components"}
::


## Sitemap

See the full [sitemap](https://nuxt-git-fix-sanitize-data-nuxt-js.vercel.app/sitemap.md) for all pages.