Emit event from page to layout

[steveDL]

Is it possible to emit an event from a page back up to default.vue layout?

<nuxt @loading="loadingHandler" />

[ontoneio]

@steveDL Can you clarify what the use case for this might be?

Just off top I'd imagine that there might be a different way to achieve the end goal you are looking for.
Do you have an example?

[tbrannt]

I actually tried to do this and found that the global event bus was actually what I was looking for.

Simply do

this.$nuxt.$emit('eventName')

in any component (as opposed to this.$emit('eventName'))

and listen to it in any component (and also in your default.vue layout) with

created () {
  this.$nuxt.$on('eventName', () => {
    this.animateSecureHint = true
  })
}

[stale]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[drewbaker]

This is amazing. Nuxt has a global event bus?! I didn't know this, only been using Nuxt for 3 years...

[ichaiwut]

This is awesome! thanks @tbrannt ! 🙏

[kissu]

It's strange that this works with <nuxt-child></nuxt-child> but not <nuxt></nuxt>.

I can even see the listener on <nuxt></nuxt> and the event emitted from the child but the method does not trigger.

This solution may be good enough tho, thanks !

[oluudeh]

I actually tried to do this and found that the global event bus was actually what I was looking for.

Simply do

this.$nuxt.$emit('eventName')

in any component (as opposed to this.$emit('eventName'))

and listen to it in any component (and also in your default.vue layout) with

created () {
  this.$nuxt.$on('eventName', () => {
    this.animateSecureHint = true
  })
}

Is there a way to do this using @nuxtjs/composition-api?

[Yvanov-N]

Thanks, Helpfull !

[ibrahimBeladi]

How could this be tackled with @nuxtjs/composition-api?

[viandwi24]

How could this be tackled with @nuxtjs/composition-api?

I'm not very good at typescript and nuxt, but you can make this reference

• composables/use-nuxt.ts

import { getCurrentInstance } from '@nuxtjs/composition-api'

export const useNuxt = () => {
  const instance = getCurrentInstance()
  return (instance as { proxy: Vue }).proxy.$nuxt
}

• parent.vue

import { useNuxt } from '~/composables/use-nuxt'
const $nuxt = useNuxt()
onMounted(() => $nuxt.$on('test', () => alert('test')))

• child.vue

import { useNuxt } from '~/composables/use-nuxt'
const $nuxt = useNuxt()
$nuxt.$emit('test')

[hinst]

I tried the approach from the latest comment but it does not work anymore:

function $nuxt.emit() exists, but function $nuxt.on() does not exist in my latest Nuxt 3 installation.

I find it inconvenient overall, that existing functions get removed from the new version of the framework. This approach creates headache for the users of the framework

[viandwi24]

I tried the approach from the latest comment but it does not work anymore:

function $nuxt.emit() exists, but function $nuxt.on() does not exist in my latest Nuxt 3 installation.

I find it inconvenient overall, that existing functions get removed from the new version of the framework. This approach creates headache for the users of the framework

what version did you try it on?

[madhusudanbabar]

I tried the approach from the latest comment but it does not work anymore:
function $nuxt.emit() exists, but function $nuxt.on() does not exist in my latest Nuxt 3 installation.
I find it inconvenient overall, that existing functions get removed from the new version of the framework. This approach creates headache for the users of the framework

what version did you try it on?

Same here, I'm also unable to access $nuxt.$on, getting this error TypeError: $nuxt.$on is not a function at default.vue:90:13
I'm using "nuxt": "^3.6.3"

[Hebilicious]

The global event bus got removed in vue 3, here's the migration guide :
https://v3-migration.vuejs.org/breaking-changes/events-api.html
In most cases this is not what you want, as vue docs say :

In most circumstances, using a global event bus for communicating between components is discouraged. While it is often the simplest solution in the short term, it almost invariably proves to be a maintenance headache in the long term. Depending on the circumstances, there are various alternatives to using an event bus:

• Props and events should be your first choice for parent-child communication. Siblings can communicate via their parent.
• Provide / inject allow a component to communicate with its slot contents. This is useful for tightly-coupled components that are always used together.
• Provide / inject can also be used for long-distance communication between components. It can help to avoid 'prop drilling', where props need to be passed down through many levels of components that don't need those props themselves.
• Prop drilling can also be avoided by refactoring to use slots. If an interim component doesn't need the props then it might indicate a problem with separation of concerns. Introducing a slot in that component allows the parent to create the content directly, so that props can be passed without the interim component needing to get involved.
• Global state management, such as Pinia.

If you really need to implement something with an event bus, I would recommend mitt.