'parent is not defined' Vue 3 & Nuxt Error

Introduction

Are you experiencing parent is not defined in Vue 3 and Nuxt 3? More specifically, is this issue occurring when using an event that a component is emitting? If so, this is because the event is emitting server side as well as client side hence you running into the issues!

Solution

The best way to resolve this error is to create a custom helper function which could sit within a utils js/ts file.

In there you can create a custom emit function like this:

const clientEmit = (event, payload) => {

if (!process.client) return

$emit(event, payload)

}

This will only emit the event on the client side whenever we call our clientEmit() function.