Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- ThemeProvider.vue — provides theme to all descendants --> <script setup> import { ref, provide, readonly } from 'vue'; const theme = ref('light'); const setTheme = (t) => { theme.value = t; }; // Provide readonly ref + mutator provide('theme', readonly(theme)); provide('setTheme', setTheme); </script> <template><slot /></template> <!-- ─────────────────────────────────────── --> <!-- DeepChild.vue — injects without prop drilling --> <template> <div :class="'app-theme--' + theme"> <p>Current theme: {{ theme }}</p> <button @click="setTheme('dark')">Dark</button> <button @click="setTheme('light')">Light</button> </div> </template> <script setup> import { inject } from 'vue'; const theme = inject('theme', 'light'); // fallback 'light' const setTheme = inject('setTheme', () => {}); </script>
Result
Open