Vue.js: How do you use provide/inject?

1<!-- Parent -->
2<script setup>
3import { provide, ref } from "vue"
4
5const theme = ref("dark")
6provide("theme", theme)
7provide("appName", "MyApp")
8</script>

1<!-- Deep child -->
2<script setup>
3import { inject } from "vue"
4
5const theme = inject("theme")
6const appName = inject("appName")
7const fallback = inject("missing", "default")
8</script>