Anybody knows how to provide a variable that is in the setup function?

export default {
  name: "MyComponent",
  provide: {
    myVariableThatIWantToProvide // This is not working
  },
  setup() {
    const myVariableThatIWantToProvide = ref('test');

    return {
      myVariableThatIWantToProvide
    };
  }
};
</script>

Anybody knows how to provide a variable that is in the setup function?

export default {
  name: "MyComponent",
  provide: {
    myVariableThatIWantToProvide // This is not working
  },
  setup() {
    const myVariableThatIWantToProvide = ref('test');

    return {
      myVariableThatIWantToProvide
    };
  }
};
</script>

• javascript
• vue.js
• vuejs3
• vue-position-api

Share Improve this question Follow edited Mar 27, 2022 at 12:57 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Dec 11, 2020 at 22:45 Adri HMAdri HM 3,12033 gold badges2222 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You should import provide from vue and use inside the setup function :

import {ref,provide} from "vue"
export default {
  name: "MyComponent",
 
  setup() {
    const myVariableThatIWantToProvide = ref('test');
      provide ('myVariableThatIWantToProvide', myVariableThatIWantToProvide )
    return {
      myVariableThatIWantToProvide
    };
  }
};
</script>

in grandchild ponent :

import {inject} from "vue"
export default {
  name: "somechild",
 
  setup() {
      const myVariableThatIWantToProvide =inject ('myVariableThatIWantToProvide')
    return {
      myVariableThatIWantToProvide
    };
  }
};
</script>