Skip to content

Commit 5ed10fa

Browse files
tooffftoofff
committed
feat(vue-query-devtools): Add VueQueryDevtoolsPanel support
1 parent c14a17d commit 5ed10fa

File tree

21 files changed

+331
-29
lines changed

21 files changed

+331
-29
lines changed

‎docs/config.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -983,6 +983,10 @@
983983
{
984984
"label": "Persister",
985985
"to": "framework/vue/examples/persister"
986+
},
987+
{
988+
"label": "Devtools Embedded Panel",
989+
"to": "framework/vue/examples/devtools-panel"
986990
}
987991
]
988992
},

‎docs/framework/vue/devtools.md

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ bun add @tanstack/vue-query-devtools
3838

3939
By default, Vue Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.
4040

41+
## Floating Mode
42+
43+
@todo: blabla
44+
4145
Devtools will be mounted as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
4246

4347
Place the following code as high in your Vue app as you can. The closer it is to the root of the page, the better it will work!
@@ -57,9 +61,10 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
5761

5862
- `initialIsOpen: Boolean`
5963
- Set this `true` if you want the dev tools to default to being open.
60-
- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
64+
- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
6165
- Defaults to `bottom-right`.
6266
- The position of the React Query logo to open and close the devtools panel.
67+
- If `relative`, the button is placed in the location that you render the devtools.
6368
- `position?: "top" | "bottom" | "left" | "right"`
6469
- Defaults to `bottom`.
6570
- The position of the React Query devtools panel.
@@ -73,6 +78,33 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
7378
- Default behavior will apply the devtool's styles to the head tag within the DOM.
7479
- Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
7580

81+
## Embedded Mode
82+
83+
@todo: blabla
84+
85+
### Options
86+
87+
- `style?: React.CSSProperties`
88+
- Custom styles for the devtools panel
89+
- Default: `{ height: '500px' }`
90+
- Example: `{ height: '100%' }`
91+
- Example: `{ height: '100%', width: '100%' }`
92+
- `onClose?: () => unknown`
93+
- Callback function that is called when the devtools panel is closed
94+
- `client?: QueryClient`,
95+
- Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
96+
- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
97+
- Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
98+
- `styleNonce?: string`
99+
- Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
100+
- `shadowDOMTarget?: ShadowRoot`
101+
- Default behavior will apply the devtool's styles to the head tag within the DOM.
102+
- Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
103+
104+
## Devtools in production
105+
106+
@todo: blabla
107+
76108
## Traditional Devtools
77109

78110
Vue Query will seamlessly integrate with the [Official Vue devtools](https://github.com/vuejs/devtools-next), adding custom inspector and timeline events.

‎examples/vue/devtools-panel/.gitignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local
6+
7+
package-lock.json
8+
yarn.lock
9+
pnpm-lock.yaml

‎examples/vue/devtools-panel/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Basic example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn` or `pnpm i` or `bun i`
6+
- `npm run dev` or `yarn dev` or `pnpm dev` or `bun dev`

‎examples/vue/devtools-panel/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>TanStack Query Vue Devtools Panel Example App</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.ts"></script>
11+
</body>
12+
</html>

‎examples/vue/devtools-panel/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@tanstack/query-example-vue-devtools-panel",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"@tanstack/vue-query": "^5.54.1",
12+
"@tanstack/vue-query-devtools": "^5.54.1",
13+
"vue": "^3.4.27",
14+
"vue-demi": "^0.14.10"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^5.1.1",
18+
"typescript": "5.3.3",
19+
"vite": "^5.3.5"
20+
}
21+
}

‎examples/vue/devtools-panel/src/App.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script lang="ts">
2+
import { defineComponent } from 'vue'
3+
import { useQuery } from '@tanstack/vue-query'
4+
import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
5+
6+
export default defineComponent({
7+
name: 'App',
8+
components: { VueQueryDevtoolsPanel },
9+
setup() {
10+
const { data, error, isFetching, isPending } = useQuery({
11+
queryKey: ['repoData'],
12+
async queryFn() {
13+
return await fetch('https://api.github.com/repos/Tanstack/query').then(
14+
(response) => response.json(),
15+
)
16+
},
17+
})
18+
19+
return {
20+
data,
21+
error,
22+
isFetching,
23+
isPending,
24+
}
25+
},
26+
})
27+
</script>
28+
29+
<template>
30+
<template v-if="isPending"> Loading... </template>
31+
<template v-else-if="error">
32+
'An error has occurred: {{ error.message }}
33+
</template>
34+
<template v-else>
35+
<h1>{{ data.name }}</h1>
36+
<p>{{ data.description }}</p>
37+
<strong>👀 {{ data.subscribers_count }}</strong>
38+
<strong>✨ {{ data.stargazers_count }}</strong>
39+
<strong>🍴 {{ data.forks_count }}</strong>
40+
<div>{{ isFetching ? 'Updating...' : '' }}</div>
41+
</template>
42+
<VueQueryDevtoolsPanel />
43+
</template>

‎examples/vue/devtools-panel/src/main.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import { VueQueryPlugin } from '@tanstack/vue-query'
3+
4+
import App from './App.vue'
5+
6+
createApp(App).use(VueQueryPlugin).mount('#app')

‎examples/vue/devtools-panel/src/shims-vue.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.vue' {
2+
import { DefineComponent } from 'vue'
3+
const component: DefineComponent<{}, {}, any>
4+
export default component
5+
}

‎examples/vue/devtools-panel/src/types.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface Post {
2+
userId: number
3+
id: number
4+
title: string
5+
body: string
6+
}

0 commit comments

Comments
 (0)