[Vue warn]: injection "x" not found.

I have a navbar that's included in the inertia layout that uses IntersectionObserver API that depends on the main content.

The main content has an attribute ref="banner" that injects the element to the navbar using provide/inject

The layout loads before the main content that's why I'm getting the warning.

Here's the hierarchy:

<Master>
		<Navbar/>
		<main-content/>
</Master>

Is there a way to fix this?

richardhulbert

1 year ago

Level 6

If I understand correctly you can use a computed property to look at the injected data and return a boolean. you use this to hide/ show your component


const showBanner = computed(()=>{
return injected.hasOwnProperty('something')
})

<Master>
		<Navbar v-if="showBanner"/>
		<main-content/>
</Master>

Something like that

Please or to participate in this conversation.