Vue.js: What is the difference between provide/inject and Pinia?

provide/inject — scoped state. Pinia — global state.

provide/inject:

• Scoped to component tree.
• Simple.
• No DevTools.

Pinia:

• Global.
• DevTools.
• TypeScript.

1<!-- provide/inject -->
2<script setup>
3provide("theme", ref("dark"))
4</script>
5
6<!-- Pinia -->
7<script setup>
8import { useThemeStore } from "@/stores/theme"
9const theme = useThemeStore()
10</script>

Key: provide/inject for local, Pinia for global.