Web / TanStack Interview Questions
What developer tools does TanStack provide and how do you add them in Vue?
TanStack Query and TanStack Router each ship a devtools panel. Query devtools visualise the cache, let you manually invalidate/refetch, and show observer counts. Router devtools show the matched route tree, params and search params in real time. Both are tree-shaken in production.
<!-- @tanstack/vue-query-devtools --> <script setup lang="ts"> import { VueQueryDevtools } from "@tanstack/vue-query-devtools" </script> <template> <RouterView /> <!-- Automatically excluded from production build --> <VueQueryDevtools :initial-is-open="false" position="bottom-right" /> </template> <!-- @tanstack/vue-router-devtools --> <script setup lang="ts"> import { TanStackRouterDevtools } from "@tanstack/vue-router-devtools" </script> <template> <RouterOutlet /> <TanStackRouterDevtools :router="router" position="bottom-left" /> </template>
More Related questions...