I'm encountering an issue while attempting to pass a reactive object using Vue's provide and inject method. I keep receiving the warning message
[Vue warn]: injection "settings" not found.Can anyone point out what I might be doing incorrectly?
To demonstrate the problem, I've created a simple CodeSandbox.
If you have any insights on why this is occurring, please share with me!
Cheers!
Test.vue
<script>
import { defineComponent, provide, reactive } from "vue";
export default defineComponent({
setup() {
const settings = reactive({
theme: "light",
color: "#F092AD",
id: 69,
});
provide("settings", settings);
return {};
},
});
</script>
App.vue
<template>
<pre>{{ settings }}</pre>
</template>
<script>
import { defineComponent, inject } from "vue";
export default defineComponent({
setup() {
const settings = inject("settings");
console.log(`settings → `, settings);
return { settings };
},
});
</script>