Provide / Inject

[azamat7g]

Is it possible to use Provide / Inject with custom nodes? I try to call inject inside custom node but always return undefined with console warn: [Vue warn]: inject() can only be used inside setup() or functional components.

Example: https://codesandbox.io/p/sandbox/peaceful-kalam-n7pdqk

[bcakmakoglu]

You're not using inject correctly.
The Warning basically says what the issue is, you need to use inject inside setup.
You're using inject inside log, which is not the same function scope.

You can't call provide or inject inside a callback function, as that is outside the setup context.

Instead call the injection inside the setup function and use refs/reactive if you need reactive values from your injection.

// App.vue

const message = ref('')

provide(MessageInjection, message)

// CustomNode.vue

const message = inject(MessageInjection, ref(''))

function log() {
   console.log(message.value)
}

<button @click="log">Log Message</button>

Here's a sandbox.