Vue uses provide and inject as a method to send data down multiple levels without having to use - but did you know you can set default values for any injected data, should it not be injected in the first place? Let's look at how it works. properties Setting default values with provide and inject in Vue If you're not sure . By default, expects a default value to be set for a key - and if it's not, it'll throw a runtime error. As such, it's beneficial to set a default value so that a runtime error does not fire. how provide and inject work, you can read about it here inject provide So let's look at an example. Say you some data in your parent like this: provide <script setup> import { provide, ref } from 'vue' const message = ref('message'); provide('myKey', message); </script> If you then inject it somewhere, you can use the second argument to set the default value. For example: <script setup> import { inject } from 'vue' const message = inject('myKey', 'the default value') </script> In this example, if cannot be found, the default value will be set to instead. You can achieve the same thing with the Options API like so: myKey the default value export default { inject: { message: { myKey: 'the default value' } } } Setting default values for injectors in Vue is best practice, and helps prevent unexpected runtime errors. Also published here.
