CODEWITHSUNDEEP
javascriptvue.jsvue-componentvuejs3vue-composition-api
Sarmad
Sarmad

Reputation: 325

Vue 3 Composition API Provide/Inject not working in Single File Components

I'm making a library in VueJS 3 using Composition API. I implemented Provide/Inject as mentioned in docs. But the property in child component is still undefined and I get following error in browser console:

Console Output

A very simple implementation of my code is as follow:

Usage In Project

<ThemeProvider>
    <Button color="green">
        ABC
    </Button>
</ThemeProvider>

<script>
    import { ThemeProvider, Button } from 'my-library'

    export default {
        name: 'SomePage',
        setup() {...},
    }
</script>

ThemeProvider.js (Parent Componen)

import { toRefs, reactive, provide, h } from 'vue'

export default {
    name: 'theme-provider',
    props:
        theme: {
            type: Object,
            default: () => ({...}),
        },
    },
    setup(props, { slots }) {
        const { theme } = toRefs(props)

        provide('theme', reactive(theme.value))

        return () =>
            h(
                'div',
                {...},
                slots.default()
            )
    },
}

Button.js (Child Component)

import { inject, h } from 'vue'

export default {
    name: 'Button',
    setup(props, { slots }) {
        const theme = inject('theme')
        console.log(theme)  // returns undefined

        return () =>
            h(
                'button',
                {...},
                slots.default()
            )
    },
}

Upvotes: 5

Views: 19134

Answers (3)

Roshni V R
Roshni V R

Reputation: 1

[Vue warn]: inject() can only be used inside setup() or functional components.

I had the same warning shown while using vue-router inside the pinia store,just had to bring initialization of pinia and router upfront of and try to rearrange it.

I was trying to call pinia store actions inside router main.js file even before router was initialized.

I was calling a toast action added in another store to this store enter image description here

earlier it was like this enter image description here

changed to enter image description here

Upvotes: 0

Fanna1119
Fanna1119

Reputation: 2288

I had the same warning and issue when using async setup()

inject() can only be used inside setup() or functional components.

The problem was having an async call before the inject was initialised, I am not sure why it matters.

The solution was declaring the inject before the async function is being called.


import getCharacters from "../composables/characters";
import { inject } from "vue";
export default {
  async setup() {
    const store = inject("store");
    const { characters } = await getCharacters();
    
    store.updateChars(characters)

    return {
      characters,
      store
    };
  },
};

Upvotes: 8

Sarmad
Sarmad

Reputation: 325

For anyone having the same issue, the code had no problem. The problem was the difference in version for 'vue' and '@vue/compiler-sfc' (Vue compiler for Single File Component) in my package.json file.

enter image description here

Upvotes: 5

Related Questions