How to Emit Custom Events in Nuxt 3

In this post, I’ll walk you through how to emit custom events in Nuxt 3 using the <script setup> syntax. I’ll use my own website as an example, where a SearchComponent emits an event to close itself, and the parent listens for it.

1. The Parent Component Controls the Visibility

We use a ref to control whether the SearchComponent is shown:

<script setup lang="ts">
  const searchOpen: Ref<boolean> = ref(false);
</script>

<SearchComponent @close:search="searchOpen = false" v-if="searchOpen" />

Explanation

• searchOpen is a reactive boolean that toggles the component.
• The @close:search listener waits for the child component to emit an event.
• When it receives the close:search event, it sets searchOpen to false, effectively closing the component.

2. The Child Component Emits the Event

Inside the child component (SearchComponent), we define and emit the event like this:

<script setup lang="ts">
  const emit = defineEmits(["close:search"]);
  
  const closeSearch = () => {
    emit("close:search");
  };
</script>

<button @click="closeSearch">Close</button>

Explanation

• defineEmits registers a list of events this component can emit.
• emit("close:search") sends the event up to the parent.
• The parent catches this and reacts accordingly.

Why close:search Instead of Just close?

Naming it close:search makes it more explicit and avoids confusion in complex components.

Bonus Tips

• Keep your event names consistent and descriptive.
• Use : in event names only when it adds semantic clarity, like update:modelValue or close:search.
• Emit events based on intent, not implementation — e.g. submit, toggle, close.

That’s it — now you know how to emit and handle custom events cleanly in Nuxt 3.
Want to see this in action? Check out the search feature in the header!